Improve the appearance of split buttons
authorAlexander Ebert <ebert@woltlab.com>
Wed, 12 Jul 2023 14:06:52 +0000 (16:06 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Wed, 12 Jul 2023 14:06:52 +0000 (16:06 +0200)
wcfsetup/install/files/style/ui/ckeditor.scss

index 8787c49bd336818d6b4d4dab5313f6072351bc5d..adb3310ab87f923cd5b7fcd08f653c8dc068cf72 100644 (file)
@@ -270,6 +270,18 @@ html[data-color-scheme="light"] .ck-body-wrapper .ck.ck-balloon-panel {
        }
 }
 
+/* Increase the width of the splitbutton arrows. */
+.ck.ck-toolbar__items .ck.ck-splitbutton > .ck-splitbutton__arrow {
+       min-width: var(--ck-ui-component-min-height);
+}
+/* Add a visual indicator for the split button functionality. */
+.ck.ck-splitbutton:not(:hover, .ck-splitbutton_open) > .ck-splitbutton__arrow::before {
+       border-left: 1px dotted var(--ck-color-toolbar-border);
+       content: "";
+       inset: 5px auto 5px -1px;
+       position: absolute;
+}
+
 html[data-color-scheme="dark"] {
        .ck.ck-editor,
        .ck.ck-body {