@ckeditor/ckeditor5-theme-lark 45.0.0-alpha.6 → 45.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "45.0.0-alpha.6",
+  "version": "45.0.0-alpha.8",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,7 +9,7 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.6"
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.8"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/theme/ckeditor5-table/tablelayout.css

@@ -18,11 +18,6 @@
 			width: 100%;
 			height: 100%;
 
-			/* Styles to make the layout table outline visible when the layout table is inside another layout table inside edge cells.
-			Currently, this solution works on every browser except Safari. */
-			overflow: clip;
-			overflow-clip-margin: var(--ck-widget-outline-thickness);
-
 			/* Resetting `border-collapse` property to the user agent styles. */
 			border-collapse: revert;
 
@@ -100,6 +95,8 @@
 					&.ck-widget__type-around__button_before,
 					&.ck-widget__type-around__button_after {
 						transform: translateY(0);
+						/* Same value as inline-image widget because it is after the inline-image in HTML structure */
+						z-index: 2;
 					}
 
 					&.ck-widget__type-around__button_before {
@@ -132,7 +129,9 @@
 					--ck-widget-handler-icon-size: var(--ck-table-layout-widget-handler-icon-size);
 
 					transform: translateY(calc(0px - var(--ck-widget-outline-thickness)));
-					z-index: var(--ck-z-default);
+					/* Value increased by 1 as in selected inline-image widget
+					because it is before the inline-image in HTML structure. */
+					z-index: 3;
 				}
 			}
 

package/theme/ckeditor5-widget/widget.css

@@ -37,13 +37,6 @@
 	&:hover {
 		outline-color: var(--ck-color-widget-hover-border);
 	}
-
-	/*
-	 * Hide the outline of all widget parents when the widget is being hovered.
-	 */
-	&:has( .ck-widget:hover ) {
-		outline-color: transparent;
-	}
 }
 
 .ck .ck-editor__nested-editable {
@@ -143,12 +136,6 @@
 			}
 		}
 	}
-
-	/* Hide the selection handle on mouse hover over the widget of all the widget parents. */
-	&:has( .ck-widget:hover ) > .ck-widget__selection-handle {
-		opacity: 0;
-		visibility: hidden;
-	}
 }
 
 /* In a RTL environment, align the selection handler to the right side of the widget */
@@ -181,6 +168,19 @@
 	}
 }
 
+/*
+* Hide the outline of all widget parents when the widget is being hovered.
+*/
+.ck .ck-widget:has( .ck-widget.table:hover ) {
+	outline-color: transparent;
+}
+
+/* Hide the selection handle on mouse hover over the widget of all the widget parents. */
+.ck .ck-widget.ck-widget_with-selection-handle:has( .ck-widget.table:hover ) > .ck-widget__selection-handle {
+	opacity: 0;
+	visibility: hidden;
+}
+
 /* Style the widget when it's selected but the editable it belongs to lost focus. */
 /* stylelint-disable-next-line no-descending-specificity */
 .ck.ck-editor__editable.ck-blurred .ck-widget {

package/theme/ckeditor5-widget/widgettypearound.css

@@ -219,15 +219,6 @@
 			opacity: 0
 		}
 	}
-
-	/*
-	 * Hide type around buttons of all widget parents when the widget is being hovered.
-	 */
-	&:has( .ck-widget:hover ) {
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			@mixin ck-widget-type-around-button-hidden;
-		}
-	}
 }
 
 /*
@@ -258,6 +249,15 @@
 	}
 }
 
+/*
+ * Hide type around buttons of all widget parents when the widget is being hovered.
+ */
+.ck .ck-widget:has( .ck-widget.table:hover ) {
+	& > .ck-widget__type-around > .ck-widget__type-around__button {
+		@mixin ck-widget-type-around-button-hidden;
+	}
+}
+
 /*
  * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor).
  */