Design moderne + seed reel engagements forgeron avec votes
- 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>
This commit is contained in:
Yvv
@@ -3,52 +3,51 @@ const { currentMood, moods, setMood } = useMood()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-1" role="radiogroup" aria-label="Ambiance visuelle">
|
||||
<div class="mood-switcher" role="radiogroup" aria-label="Ambiance visuelle">
|
||||
<UTooltip
|
||||
v-for="mood in moods"
|
||||
:key="mood.id"
|
||||
:text="`${mood.label} — ${mood.description}`"
|
||||
:text="mood.label"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="currentMood === mood.id"
|
||||
:aria-label="`Ambiance ${mood.label}`"
|
||||
class="mood-btn"
|
||||
:class="{ 'mood-btn--active': currentMood === mood.id }"
|
||||
class="mood-dot"
|
||||
:class="{ 'mood-dot--active': currentMood === mood.id }"
|
||||
:style="{ '--dot-color': mood.color }"
|
||||
@click="setMood(mood.id)"
|
||||
>
|
||||
<UIcon :name="mood.icon" class="text-base" />
|
||||
</button>
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mood-btn {
|
||||
.mood-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.mood-dot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
background: var(--mood-surface, #f3f4f6);
|
||||
color: var(--mood-text-muted, #6b7280);
|
||||
background: var(--dot-color, var(--mood-text-muted));
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mood-btn:hover {
|
||||
background: var(--mood-surface-hover, #e5e7eb);
|
||||
color: var(--mood-accent, #4b5563);
|
||||
transform: scale(1.1);
|
||||
.mood-dot:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.mood-btn--active {
|
||||
border-color: var(--mood-accent, #3b82f6);
|
||||
color: var(--mood-accent, #3b82f6);
|
||||
background: var(--mood-accent-soft, #eff6ff);
|
||||
box-shadow: 0 0 0 2px var(--mood-shadow, rgba(59, 130, 246, 0.15));
|
||||
.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>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* SectionLayout — Mise en page reutilisable pour les sections (documents, decisions, mandats).
|
||||
* SectionLayout — Mise en page pour sections (documents, decisions, mandats).
|
||||
*
|
||||
* Structure : titre + status filter pills en haut,
|
||||
* puis une grille principale (contenu) + barre laterale "Boite a outils".
|
||||
* Responsive : sur mobile la boite a outils passe sous le contenu principal.
|
||||
* Structure : titre + status pills + grille (contenu + toolbox).
|
||||
* Responsive : toolbox passe sous le contenu sur mobile.
|
||||
*/
|
||||
|
||||
export interface StatusFilter {
|
||||
@@ -43,7 +42,6 @@ const emit = defineEmits<{
|
||||
'update:activeStatus': [status: string | null]
|
||||
}>()
|
||||
|
||||
/** Map status id to CSS class for status pills. */
|
||||
const statusCssMap: Record<string, string> = {
|
||||
draft: 'status-prepa',
|
||||
qualification: 'status-prepa',
|
||||
@@ -74,19 +72,15 @@ function toggleStatus(statusId: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section-layout">
|
||||
<!-- Header: title + status pills -->
|
||||
<div class="section-layout__header">
|
||||
<div class="section-layout__title-block">
|
||||
<h1 class="section-layout__title">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p v-if="subtitle" class="section-layout__subtitle">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
<div class="section">
|
||||
<!-- Header -->
|
||||
<div class="section__header">
|
||||
<div class="section__title-block">
|
||||
<h1 class="section__title">{{ title }}</h1>
|
||||
<p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="statuses.length > 0" class="section-layout__status-pills">
|
||||
<div v-if="statuses.length > 0" class="section__pills">
|
||||
<button
|
||||
v-for="status in statuses"
|
||||
:key="status.id"
|
||||
@@ -96,45 +90,34 @@ function toggleStatus(statusId: string) {
|
||||
@click="toggleStatus(status.id)"
|
||||
>
|
||||
{{ status.label }}
|
||||
<span v-if="status.count > 0" class="status-pill__count">
|
||||
{{ status.count }}
|
||||
</span>
|
||||
<span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content area: list + toolbox sidebar -->
|
||||
<div class="section-layout__body">
|
||||
<!-- Left: search + list -->
|
||||
<div class="section-layout__main">
|
||||
<!-- Search / sort bar slot -->
|
||||
<div v-if="$slots.search" class="section-layout__search">
|
||||
<!-- Body: content + toolbox -->
|
||||
<div class="section__body">
|
||||
<div class="section__main">
|
||||
<div v-if="$slots.search" class="section__search">
|
||||
<slot name="search" />
|
||||
</div>
|
||||
|
||||
<!-- Main list content -->
|
||||
<div class="section-layout__content">
|
||||
<div class="section__content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Empty state slot -->
|
||||
<div v-if="$slots.empty" class="section-layout__empty">
|
||||
<div v-if="$slots.empty" class="section__empty">
|
||||
<slot name="empty" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: toolbox sidebar -->
|
||||
<aside class="section-layout__toolbox">
|
||||
<div class="section-layout__toolbox-header">
|
||||
<UIcon name="i-lucide-wrench" class="text-sm" />
|
||||
<aside class="section__toolbox">
|
||||
<div class="section__toolbox-head">
|
||||
<UIcon name="i-lucide-wrench" class="text-xs" />
|
||||
<span>Boite a outils</span>
|
||||
</div>
|
||||
|
||||
<!-- Custom toolbox slot or default vignettes -->
|
||||
<div v-if="$slots.toolbox" class="section-layout__toolbox-content">
|
||||
<div v-if="$slots.toolbox" class="section__toolbox-body">
|
||||
<slot name="toolbox" />
|
||||
</div>
|
||||
<div v-else-if="toolboxItems && toolboxItems.length > 0" class="section-layout__toolbox-content">
|
||||
<div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
|
||||
<ToolboxVignette
|
||||
v-for="(item, idx) in toolboxItems"
|
||||
:key="idx"
|
||||
@@ -142,8 +125,8 @@ function toggleStatus(statusId: string) {
|
||||
:description="item.description"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="section-layout__toolbox-empty">
|
||||
<p>Aucun outil disponible</p>
|
||||
<div v-else class="section__toolbox-empty">
|
||||
Aucun outil disponible
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
@@ -151,126 +134,118 @@ function toggleStatus(statusId: string) {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.section-layout {
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.section-layout__header {
|
||||
.section__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.section-layout__title-block {
|
||||
.section__title-block {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-layout__title {
|
||||
font-size: 1.5rem;
|
||||
.section__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
color: var(--mood-text);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.section-layout__subtitle {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
.section__subtitle {
|
||||
margin-top: 0.125rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--mood-text-muted);
|
||||
}
|
||||
|
||||
.section-layout__status-pills {
|
||||
.section__pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section__pill-count {
|
||||
margin-left: 0.25rem;
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section__body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 16rem;
|
||||
gap: 1.25rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.section__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section__search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Active state ring for pills */
|
||||
.status-pill.active {
|
||||
outline: 2px solid var(--mood-accent);
|
||||
outline-offset: 2px;
|
||||
.section__content {
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
.status-pill__count {
|
||||
margin-left: 0.375rem;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.section-layout__body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.section-layout__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-layout__search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-layout__content {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.section-layout__toolbox {
|
||||
.section__toolbox {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
background: var(--mood-surface);
|
||||
border: 1px solid var(--mood-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.section-layout__toolbox-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
color: var(--mood-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.section-layout__toolbox-content {
|
||||
top: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
background: var(--mood-surface);
|
||||
border: 1px solid var(--mood-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.875rem;
|
||||
}
|
||||
|
||||
.section-layout__toolbox-empty {
|
||||
font-size: 0.75rem;
|
||||
.section__toolbox-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
color: var(--mood-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.section__toolbox-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.section__toolbox-empty {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--mood-text-muted);
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
/* Responsive: on mobile, toolbox goes below */
|
||||
@media (max-width: 1023px) {
|
||||
.section-layout__body {
|
||||
.section__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-layout__toolbox {
|
||||
.section__toolbox {
|
||||
position: static;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@@ -34,9 +34,12 @@ const STATUS_MAP: Record<string, { label: string; cssClass: string }> = {
|
||||
// Mandate specific
|
||||
formulation: { label: 'En prepa', cssClass: 'status-prepa' },
|
||||
candidature: { label: 'En prepa', cssClass: 'status-prepa' },
|
||||
candidacy: { label: 'En prepa', cssClass: 'status-prepa' },
|
||||
investiture: { label: 'En vote', cssClass: 'status-vote' },
|
||||
revoked: { label: 'Clos', cssClass: 'status-clos' },
|
||||
completed: { label: 'Clos', cssClass: 'status-clos' },
|
||||
archived: { label: 'Clos', cssClass: 'status-clos' },
|
||||
reporting: { label: 'En vote', cssClass: 'status-vote' },
|
||||
}
|
||||
|
||||
const resolved = computed(() => {
|
||||
@@ -55,7 +58,7 @@ function handleClick() {
|
||||
v-if="clickable"
|
||||
type="button"
|
||||
class="status-pill"
|
||||
:class="[resolved.cssClass, { 'status-pill--active': active }]"
|
||||
:class="[resolved.cssClass, { active: active }]"
|
||||
@click="handleClick"
|
||||
>
|
||||
{{ resolved.label }}
|
||||
@@ -68,83 +71,3 @@ function handleClick() {
|
||||
{{ resolved.label }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
transition: box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
button.status-pill {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.status-pill:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.status-pill--active {
|
||||
box-shadow: 0 0 0 2px currentColor;
|
||||
}
|
||||
|
||||
/* --- En prepa (amber/warning) --- */
|
||||
.status-prepa {
|
||||
background-color: var(--ui-color-amber-50, #fffbeb);
|
||||
color: var(--ui-color-amber-700, #b45309);
|
||||
border-color: var(--ui-color-amber-200, #fde68a);
|
||||
}
|
||||
|
||||
/* --- En vigueur (green/success) --- */
|
||||
.status-vigueur {
|
||||
background-color: var(--ui-color-green-50, #f0fdf4);
|
||||
color: var(--ui-color-green-700, #15803d);
|
||||
border-color: var(--ui-color-green-200, #bbf7d0);
|
||||
}
|
||||
|
||||
/* --- En vote (blue/primary) --- */
|
||||
.status-vote {
|
||||
background-color: var(--ui-color-blue-50, #eff6ff);
|
||||
color: var(--ui-color-blue-700, #1d4ed8);
|
||||
border-color: var(--ui-color-blue-200, #bfdbfe);
|
||||
}
|
||||
|
||||
/* --- Clos (gray/neutral) --- */
|
||||
.status-clos {
|
||||
background-color: var(--ui-color-gray-50, #f9fafb);
|
||||
color: var(--ui-color-gray-500, #6b7280);
|
||||
border-color: var(--ui-color-gray-200, #e5e7eb);
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
.dark .status-prepa {
|
||||
background-color: var(--ui-color-amber-950, #451a03);
|
||||
color: var(--ui-color-amber-300, #fcd34d);
|
||||
border-color: var(--ui-color-amber-800, #92400e);
|
||||
}
|
||||
|
||||
.dark .status-vigueur {
|
||||
background-color: var(--ui-color-green-950, #052e16);
|
||||
color: var(--ui-color-green-300, #86efac);
|
||||
border-color: var(--ui-color-green-800, #166534);
|
||||
}
|
||||
|
||||
.dark .status-vote {
|
||||
background-color: var(--ui-color-blue-950, #172554);
|
||||
color: var(--ui-color-blue-300, #93c5fd);
|
||||
border-color: var(--ui-color-blue-800, #1e40af);
|
||||
}
|
||||
|
||||
.dark .status-clos {
|
||||
background-color: var(--ui-color-gray-900, #111827);
|
||||
color: var(--ui-color-gray-400, #9ca3af);
|
||||
border-color: var(--ui-color-gray-700, #374151);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* ToolboxVignette — Carte compacte pour la barre laterale "Boite a outils".
|
||||
*
|
||||
* Affiche un protocole ou outil avec titre, description, contexte et actions.
|
||||
* Utilise les variables mood pour le theming.
|
||||
* ToolboxVignette — Carte compacte pour la boite a outils.
|
||||
*/
|
||||
|
||||
export interface ToolboxAction {
|
||||
@@ -51,82 +48,87 @@ function handleAction(action: ToolboxAction) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toolbox-vignette">
|
||||
<h4 class="toolbox-vignette__title">
|
||||
{{ title }}
|
||||
</h4>
|
||||
|
||||
<p v-if="description" class="toolbox-vignette__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<div v-if="contextLabel" class="toolbox-vignette__context">
|
||||
<div class="vignette">
|
||||
<h4 class="vignette__title">{{ title }}</h4>
|
||||
<p v-if="description" class="vignette__desc">{{ description }}</p>
|
||||
<div v-if="contextLabel" class="vignette__ctx">
|
||||
<UIcon name="i-lucide-tag" class="text-xs" />
|
||||
<span>Contexte : {{ contextLabel }}</span>
|
||||
<span>{{ contextLabel }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toolbox-vignette__actions">
|
||||
<UButton
|
||||
<div class="vignette__actions">
|
||||
<button
|
||||
v-for="action in resolvedActions"
|
||||
:key="action.label"
|
||||
:icon="action.icon"
|
||||
:label="action.label"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
class="toolbox-vignette__action-btn"
|
||||
class="vignette__btn"
|
||||
@click="handleAction(action)"
|
||||
/>
|
||||
>
|
||||
<UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
|
||||
<span>{{ action.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbox-vignette {
|
||||
.vignette {
|
||||
background: var(--mood-surface);
|
||||
border: 1px solid var(--mood-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.625rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
gap: 0.375rem;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.toolbox-vignette:hover {
|
||||
.vignette:hover {
|
||||
border-color: var(--mood-accent);
|
||||
box-shadow: 0 1px 4px var(--mood-shadow);
|
||||
}
|
||||
|
||||
.toolbox-vignette__title {
|
||||
font-size: 0.8125rem;
|
||||
.vignette__title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--mood-text);
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toolbox-vignette__description {
|
||||
font-size: 0.75rem;
|
||||
.vignette__desc {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--mood-text-muted);
|
||||
line-height: 1.4;
|
||||
line-height: 1.35;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toolbox-vignette__context {
|
||||
.vignette__ctx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-size: 0.625rem;
|
||||
color: var(--mood-text-muted);
|
||||
}
|
||||
|
||||
.toolbox-vignette__actions {
|
||||
.vignette__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.toolbox-vignette__action-btn {
|
||||
--btn-bg: var(--mood-accent-soft);
|
||||
--btn-color: var(--mood-accent);
|
||||
.vignette__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.1875rem 0.5rem;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: var(--mood-accent);
|
||||
background: var(--mood-accent-soft);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.12s ease;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.vignette__btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user