diff --git a/assets/css/editor.css b/assets/css/editor.css index 647b3fd..9008443 100644 --- a/assets/css/editor.css +++ b/assets/css/editor.css @@ -16,6 +16,7 @@ color: var(--text-primary); min-height: 300px; font-family: inherit; + overflow-x: hidden; } /* Contenu de l'éditeur */ @@ -33,7 +34,9 @@ } /* Styles des éléments dans l'éditeur */ -.ql-editor h1, .ql-editor h2, .ql-editor h3 { +.ql-editor h1, +.ql-editor h2, +.ql-editor h3 { color: var(--text-primary); margin: 1em 0 0.5em; } @@ -52,23 +55,67 @@ padding: var(--spacing-md); } -/* Icônes de la barre d'outils */ -.ql-snow .ql-stroke { - stroke: var(--text-secondary); +/* Gestion des images dans l'éditeur */ +.ql-editor img { + max-width: 100% !important; + height: auto; + display: block; + margin: var(--spacing-md) 0; } -.ql-snow .ql-fill { - fill: var(--text-secondary); +.ql-editor img.ql-selected { + border: 2px solid var(--accent-primary); +} + +.ql-editor .image-container { + margin: var(--spacing-md) 0; + max-width: 100%; +} + +.ql-editor .ql-size-small img { + max-width: 50%; + margin: 0 auto; +} + +.ql-editor .ql-size-large img { + max-width: 100%; +} + +.ql-editor .ql-align-center img { + margin-left: auto; + margin-right: auto; +} + +.ql-editor .ql-align-right img { + margin-left: auto; + margin-right: 0; +} + +/* Icônes de la barre d'outils */ +.ql-snow .ql-stroke { + stroke: var(--text-primary) !important; + stroke-width: 1.2 !important; +} + +.ql-snow .ql-fill, +.ql-snow .ql-stroke.ql-fill { + fill: var(--text-primary) !important; } .ql-snow .ql-picker { - color: var(--text-secondary); + color: var(--text-primary) !important; } .ql-snow.ql-toolbar button { padding: 4px 6px; height: 28px; width: 28px; + opacity: 0.9; +} + +.ql-snow.ql-toolbar button svg { + width: 20px; + height: 20px; } /* États au survol et actif */ @@ -76,10 +123,9 @@ .ql-snow .ql-toolbar button:focus, .ql-snow .ql-toolbar button.ql-active, .ql-snow .ql-toolbar .ql-picker-label:hover, -.ql-snow .ql-toolbar .ql-picker-label.ql-active, -.ql-snow .ql-toolbar .ql-picker-item:hover, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected { - color: var(--accent-primary); +.ql-snow .ql-toolbar .ql-picker-label.ql-active { + color: var(--accent-primary) !important; + opacity: 1; } .ql-snow .ql-toolbar button:hover .ql-stroke, @@ -87,7 +133,7 @@ .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke { - stroke: var(--accent-primary); + stroke: var(--accent-primary) !important; } .ql-snow .ql-toolbar button:hover .ql-fill, @@ -95,26 +141,27 @@ .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill { - fill: var(--accent-primary); + fill: var(--accent-primary) !important; } /* Menus déroulants */ .ql-snow .ql-picker-options { - background-color: var(--bg-secondary); - border-color: var(--border-color); + background-color: var(--bg-secondary) !important; + border-color: var(--border-color) !important; border-radius: var(--radius-sm); padding: var(--spacing-sm); } .ql-snow .ql-picker-options .ql-picker-item { - color: var(--text-primary); + color: var(--text-primary) !important; padding: 4px 8px; border-radius: var(--radius-sm); } -.ql-snow .ql-picker-options .ql-picker-item:hover { - color: var(--accent-primary); - background-color: var(--bg-tertiary); +.ql-snow .ql-picker-options .ql-picker-item:hover, +.ql-snow .ql-picker-options .ql-picker-item.ql-selected { + color: var(--accent-primary) !important; + background-color: var(--bg-tertiary) !important; } /* Tooltip pour les liens */ @@ -160,16 +207,16 @@ background-color: var(--bg-tertiary); } -/* Styles des couleurs */ -.ql-snow .ql-color-picker .ql-picker-options { - padding: 5px; - width: 152px; +/* Tooltip pour le redimensionnement des images */ +.ql-snow .ql-tooltip[data-mode="image"] { + padding: var(--spacing-sm); + display: flex; + gap: var(--spacing-sm); + align-items: center; } -.ql-snow .ql-color-picker .ql-picker-item { - border: 1px solid var(--border-color); - margin: 2px; - border-radius: var(--radius-sm); +.ql-snow .ql-tooltip[data-mode="image"] input[type="text"] { + min-width: 200px; } /* Responsive */ @@ -182,6 +229,14 @@ min-height: 200px; } + .ql-editor .ql-size-small img { + max-width: 75%; + } + + .ql-editor img { + max-width: 100% !important; + } + .ql-snow .ql-tooltip { left: 0 !important; top: 100% !important;