Merge pull request #282 from ckeditor/i/6446

Other: Introduced the table cell overlay to improve the rendering of multiple–cell selections and bring compatibility with styled table cells. Closes #6446.
ckeditor · Apr 17, 2020 · f87a880 · f87a880
2 parents c8f37c9 + fa68387
commit f87a880
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css
@@ -4,19 +4,31 @@
  */
 
 :root {
-	--ck-table-selected-cell-background: hsl(210, 92%, 90%);
+	--ck-table-selected-cell-background: hsla(208, 90%, 80%, .3);
 }
 
 .ck.ck-editor__editable .table table {
 	& td.ck-editor__editable_selected,
 	& th.ck-editor__editable_selected {
-		background-color: var(--ck-table-selected-cell-background) !important;
-
+		position: relative;
 		caret-color: transparent;
 		outline: unset;
 		box-shadow: unset;
 
-		& ::selection {
+		/* https://github.com/ckeditor/ckeditor5/issues/6446 */
+		&:after {
+			content: '';
+			pointer-events: none;
+			background-color: var(--ck-table-selected-cell-background);
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+
+		& ::selection,
+		&:focus {
 			background-color: transparent;
 		}
 
@@ -25,4 +37,3 @@
 		}
 	}
 }
-