From 76317edc21e023a0e8743ffe3ea8c2b5af633b43 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 15 May 2023 14:53:45 +0200
Subject: [PATCH] Update the color palette for CKEditor

Fixes #5485
---
 .../files/acp/style/acpStyleEditor.css        |  6 ++++
 .../install/files/acp/templates/styleAdd.tpl  | 30 +++++++++----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 56dc1cec8d..846ba58ae8 100644
--- 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 f33e6edfda..ff1e4eb405 100644
--- 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; }',
-- 
2.20.1