diff --git a/assets/css/editor.css b/assets/css/editor.css index 73e47aa..7b563a2 100644 --- a/assets/css/editor.css +++ b/assets/css/editor.css @@ -219,9 +219,40 @@ } /* Style des icônes dans la barre d'outils */ -.ql-snow .ql-toolbar button svg { - width: 18px; - height: 18px; +.ql-toolbar.ql-snow { + background: var(--bg-secondary); + border-color: var(--border-color); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + padding: var(--spacing-sm); + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +/* États au survol des boutons */ +.ql-toolbar.ql-snow button:hover { + color: var(--accent-primary) !important; +} + +.ql-toolbar.ql-snow button:hover svg { + stroke: var(--accent-primary) !important; +} + +.ql-toolbar.ql-snow button:hover .ql-stroke { + stroke: var(--accent-primary) !important; +} + +.ql-toolbar.ql-snow button:hover .ql-fill { + fill: var(--accent-primary) !important; +} + +/* Style des pickers (menus déroulants) */ +.ql-toolbar.ql-snow .ql-picker-label:hover { + color: var(--accent-primary) !important; +} + +.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { + stroke: var(--accent-primary) !important; } /* Style du séparateur dans l'éditeur */ @@ -237,15 +268,26 @@ opacity: 0.8; } -/* États au survol des boutons */ -.ql-snow .ql-toolbar button:hover .ql-stroke, -.ql-snow .ql-toolbar button.ql-active .ql-stroke { - stroke: var(--accent-primary); +/* Style de base des icônes */ +.ql-snow .ql-stroke { + stroke: var(--text-primary); } -.ql-snow .ql-toolbar button:hover .ql-fill, -.ql-snow .ql-toolbar button.ql-active .ql-fill { - fill: var(--accent-primary); +.ql-snow .ql-fill { + fill: var(--text-primary); +} + +.ql-snow .ql-picker { + color: var(--text-primary); +} + +/* États actifs des boutons */ +.ql-toolbar.ql-snow .ql-active, +.ql-toolbar.ql-snow .ql-active .ql-stroke, +.ql-toolbar.ql-snow .ql-active .ql-fill { + color: var(--accent-primary) !important; + stroke: var(--accent-primary) !important; + fill: var(--accent-primary) !important; } /* Responsive */