feat: ajouter système de filtres visuels pour notes avec 8 effets CSS (glassmorphism, vignette, ligné, quadrillé, noise, points, rayures), intégration dans Background Studio avec palette dédiée, support thème clair/sombre, et synchronisation complète avec tags notefilter- pour persistance
This commit is contained in:
@@ -1557,4 +1557,177 @@ body.view-notes .content-container {
|
||||
background-size: cover;
|
||||
background-position: center bottom;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Note Filter Effects (8 CSS filters)
|
||||
========================================= */
|
||||
|
||||
/* 1. Glassmorphism - Effet verre givré */
|
||||
.note-card.note-filter-glass,
|
||||
.note-modal.note-filter-glass,
|
||||
.link-outer.note-filter-glass {
|
||||
background: rgba(255, 255, 255, 0.25) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-card.note-filter-glass,
|
||||
[data-theme="dark"] .note-modal.note-filter-glass,
|
||||
[data-theme="dark"] .link-outer.note-filter-glass {
|
||||
background: rgba(0, 0, 0, 0.35) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* 2. Vignette - Coins sombres */
|
||||
.note-card.note-filter-vignette::after,
|
||||
.note-modal.note-filter-vignette::after,
|
||||
.link-outer.note-filter-vignette::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.note-card.note-filter-vignette,
|
||||
.note-modal.note-filter-vignette,
|
||||
.link-outer.note-filter-vignette {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 3. Ligné - Papier ligné */
|
||||
.note-card.note-filter-lined,
|
||||
.note-modal.note-filter-lined,
|
||||
.link-outer.note-filter-lined {
|
||||
background-image: repeating-linear-gradient(
|
||||
transparent,
|
||||
transparent 29px,
|
||||
rgba(0, 0, 0, 0.1) 30px
|
||||
) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-card.note-filter-lined,
|
||||
[data-theme="dark"] .note-modal.note-filter-lined,
|
||||
[data-theme="dark"] .link-outer.note-filter-lined {
|
||||
background-image: repeating-linear-gradient(
|
||||
transparent,
|
||||
transparent 29px,
|
||||
rgba(255, 255, 255, 0.1) 30px
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* 4. Quadrillé - Grid */
|
||||
.note-card.note-filter-grid,
|
||||
.note-modal.note-filter-grid,
|
||||
.link-outer.note-filter-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) !important;
|
||||
background-size: 20px 20px !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-card.note-filter-grid,
|
||||
[data-theme="dark"] .note-modal.note-filter-grid,
|
||||
[data-theme="dark"] .link-outer.note-filter-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
|
||||
}
|
||||
|
||||
/* 5. Noise - Texture granuleuse */
|
||||
.note-card.note-filter-noise,
|
||||
.note-modal.note-filter-noise,
|
||||
.link-outer.note-filter-noise {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.note-card.note-filter-noise::before,
|
||||
.note-modal.note-filter-noise::before,
|
||||
.link-outer.note-filter-noise::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
mix-blend-mode: overlay;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 6. Points - Bullet journal dotted */
|
||||
.note-card.note-filter-dots,
|
||||
.note-modal.note-filter-dots,
|
||||
.link-outer.note-filter-dots {
|
||||
background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px) !important;
|
||||
background-size: 20px 20px !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-card.note-filter-dots,
|
||||
[data-theme="dark"] .note-modal.note-filter-dots,
|
||||
[data-theme="dark"] .link-outer.note-filter-dots {
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px) !important;
|
||||
}
|
||||
|
||||
/* 7. Rayures - Stripes diagonales */
|
||||
.note-card.note-filter-stripes,
|
||||
.note-modal.note-filter-stripes,
|
||||
.link-outer.note-filter-stripes {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(0, 0, 0, 0.05) 10px,
|
||||
rgba(0, 0, 0, 0.05) 20px
|
||||
) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-card.note-filter-stripes,
|
||||
[data-theme="dark"] .note-modal.note-filter-stripes,
|
||||
[data-theme="dark"] .link-outer.note-filter-stripes {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(255, 255, 255, 0.05) 10px,
|
||||
rgba(255, 255, 255, 0.05) 20px
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Filter-specific row layout for palette
|
||||
========================================= */
|
||||
.palette-row-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 28px);
|
||||
gap: 10px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.palette-btn-filter,
|
||||
.palette-btn-filter-none {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.palette-btn-filter i,
|
||||
.palette-btn-filter-none i {
|
||||
font-size: 1rem;
|
||||
color: var(--text-color, #334155);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .palette-btn-filter,
|
||||
[data-theme="dark"] .palette-btn-filter-none {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .palette-btn-filter i,
|
||||
[data-theme="dark"] .palette-btn-filter-none i {
|
||||
color: #e8eaed;
|
||||
}
|
||||
Reference in New Issue
Block a user