Răsfoiți Sursa

Improved some visual aspects of the widget when the fake caret is visible.

Aleksander Nowodzinski 5 ani în urmă
părinte
comite
a2538825d8

+ 17 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -152,6 +152,15 @@
 
 	&.ck-widget_type-around_show-fake-caret_before,
 	&.ck-widget_type-around_show-fake-caret_after {
+		/*
+		 * When the "fake caret" is visible we simulate that the widget is not selected
+		 * (despite being physically selected), so the outline color should be for the
+		 * unselected widget.
+		 */
+		&.ck-widget_selected:hover {
+			outline-color: var(--ck-color-widget-hover-border);
+		}
+
 		/*
 		 * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
 		 * In this state, the type around buttons would collide with the fake carets so they should disappear.
@@ -164,8 +173,13 @@
 		 * Fake horizontal caret integration with the selection handle. When the caret is visible, simply
 		 * hide the handle because it intersects with the caret (and does not make much sense anyway).
 		 */
-		&.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle {
-			opacity: 0
+		&.ck-widget_with-selection-handle {
+			&.ck-widget_selected,
+			&.ck-widget_selected:hover {
+				& > .ck-widget__selection-handle {
+					opacity: 0
+				}
+			}
 		}
 
 		/*
@@ -173,7 +187,7 @@
 		 * hide the resize UI because it creates too much noise. It can be visible when the user
 		 * hovers the widget, though.
 		 */
-		&.ck-widget_selected.ck-widget_with-resizer:not(:hover) > .ck-widget__resizer {
+		&.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
 			opacity: 0
 		}
 	}

+ 13 - 3
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -57,18 +57,28 @@
 	/*
 	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
 	 */
-	& .ck-widget__type-around__fake-caret {
+	& > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
 		display: none;
 		position: absolute;
 		left: 0;
 		right: 0;
 	}
 
+	/*
+	 * When the widget is hovered the "fake caret" would normally be narrower than the
+	 * extra outline displayed around the widget. Let's extend the "fake caret" to match
+	 * the full width of the widget.
+	 */
+	&:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		left: calc( -1 * var(--ck-widget-outline-thickness) );
+		right: calc( -1 * var(--ck-widget-outline-thickness) );
+	}
+
 	/*
 	 * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation).
 	 */
 	&.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
-		top: -1px;
+		top: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
 		display: block;
 	}
 
@@ -76,7 +86,7 @@
 	 * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation).
 	 */
 	&.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
-		bottom: -1px;
+		bottom: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
 		display: block;
 	}
 }