Update the color palette for CKEditor

Fixes #5485

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 56dc1cec8d75d496961b7cb8c9083dad9c913e48..846ba58ae86fe5f9a23a9185890be412a16a14e2 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -61,6 +61,12 @@ html[dir="rtl"] #spTable th { text-align: right; }
 #spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; min-height: 100px; padding: 10px; }
 #spEditorTable { border-collapse: collapse; border-spacing: 0; margin: 10px 0; min-width: 60%; }
 #spEditorTable td { border: 1px solid rgb(221, 221, 221); padding: 10px; }
+.spEditorToolbar { border: 1px solid rgb(224, 224, 224); border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0; column-gap: 3px; display: flex; padding: 3px; }
+.spEditorToolbarButton { align-items: center; border-radius: var(--wcfBorderRadius); display: flex; height: 30px; justify-content: center; width: 30px; }
+.spEditorToolbarButton.spEditorToolbarButton--active { background-color: #24425F; color: #fff; }
+.spEditorToolbarButton:hover:not(.spEditorToolbarButton--active, [disabled]) { background-color: #3A6D9C; color: #fff; }
+.spEditorToolbarButton[disabled] { color: #A5A5A5; }
+.spEditorToolbarDivider { background-color: rgb(224, 224, 224); display: block; width: 1px; }
 
 /* ### dropdown ### */
 #spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index f33e6edfdaa7482f0d6ee9002bea30d6b73d6ec5..ff1e4eb40549565b7398a0eb7790c0b80ebb3e54 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -714,17 +714,15 @@
                                                                        
                                                                        <div id="spEditor">
                                                                                <div id="spEditorToolbar" data-region="wcfEditorButton">
-                                                                                       <ul class="redactor-toolbar">
-                                                                                               <li><a class="redactor-button-disabled">{icon name='file-code'}</a></li>
-                                                                                               <li><a>{icon name='rotate-left'}</a></li>
-                                                                                               <li><a>{icon name='arrow-rotate-right'}</a></li>
-                                                                                               <li><a>{icon name='up-right-and-down-left-from-center'}</a></li>
-                                                                                               <li class="redactor-toolbar-separator"><a>{icon name='heading'}</a></li>
-                                                                                               <li class="redactor-toolbar-separator"><a>{icon name='bold'}</a></li>
-                                                                                               <li><a class="dropact">{icon name='italic'}</a></li>
-                                                                                               <li><a>{icon name='underline'}</a></li>
-                                                                                               <li><a>{icon name='strikethrough'}</a></li>
-                                                                                       </ul>
+                                                                                       <div class="spEditorToolbar">
+                                                                                               <button class="spEditorToolbarButton" type="button">{icon name='bold'}</button>
+                                                                                               <button class="spEditorToolbarButton spEditorToolbarButton--active" type="button">{icon name='italic'}</button>
+                                                                                               <span class="spEditorToolbarDivider"></span>
+                                                                                               <button class="spEditorToolbarButton" type="button">{icon name='list-ul'}</button>
+                                                                                               <button class="spEditorToolbarButton" type="button">{icon name='list-ol'}</button>
+                                                                                               <span class="spEditorToolbarDivider"></span>
+                                                                                               <button class="spEditorToolbarButton" type="button" disabled>{icon name='table'}</button>
+                                                                                       </div>
                                                                                </div>
                                                                                <div id="spEditorContent">
                                                                                        <table id="spEditorTable" data-region="wcfEditorTable">
@@ -989,11 +987,11 @@
                                'wcfButtonPrimaryTextActive': '#spButtonPrimary .button.active, #spButtonPrimary .button:hover { color: VALUE; }',
                                'wcfButtonDisabledBackground': '#spButton .button.disabled, #spButtonPrimary .button.disabled { background-color: VALUE; }',
                                'wcfButtonDisabledText': '#spButton .button.disabled, #spButtonPrimary .button.disabled { color: VALUE; }',
-                               'wcfEditorButtonBackground': '#spEditor .redactor-toolbar, #spEditor .redactor-toolbar a { background-color: VALUE; }',
-                               'wcfEditorButtonBackgroundActive': '#spEditor .redactor-toolbar a:hover, #spEditor .redactor-toolbar a.dropact { background-color: VALUE; }',
-                               'wcfEditorButtonText': '#spEditor .redactor-toolbar a { color: VALUE; }',
-                               'wcfEditorButtonTextActive': '#spEditor .redactor-toolbar a:hover, #spEditor .redactor-toolbar a.dropact { color: VALUE; }',
-                               'wcfEditorButtonTextDisabled': '#spEditor .redactor-toolbar a.redactor-button-disabled { color: VALUE; }',
+                               'wcfEditorButtonBackground': '#spEditor .spEditorToolbarButton:hover:not(.spEditorToolbarButton--active, [disabled]) { background-color: VALUE; }',
+                               'wcfEditorButtonBackgroundActive': '#spEditor .spEditorToolbarButton.spEditorToolbarButton--active { background-color: VALUE; }',
+                               'wcfEditorButtonText': '#spEditor .spEditorToolbarButton:not([disabled]) { color: VALUE; }',
+                               'wcfEditorButtonTextActive': '#spEditor .spEditorToolbarButton.spEditorToolbarButton--active, .spEditorToolbarButton:hover:not(.spEditorToolbarButton--active, [disabled]) { color: VALUE; }',
+                               'wcfEditorButtonTextDisabled': '#spEditor .spEditorToolbarButton[disabled] { color: VALUE; }',
                                'wcfEditorTableBorder': '#spEditorTable td { border-color: VALUE; }',
                                'wcfDropdownBackground': '#spDropdown { background-color: VALUE; } __COMBO_RULE__ #spDropdown::before { border-bottom-color: VALUE; }',
                                'wcfDropdownBorderInner': '#spDropdown .dropdownDivider { border-color: VALUE; }',