Browse Source

Used a thin caret-like look for type around lines.

Aleksander Nowodzinski 5 năm trước cách đây
mục cha
commit
b22aa4465b

+ 16 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -117,7 +117,7 @@
 
 	& .ck-widget__type-around__line {
 		pointer-events: none;
-		height: var(--ck-widget-outline-thickness);
+		height: 1px;
 		animation: ck-widget-type-around-line-pulse linear 1s infinite normal forwards;
 	}
 
@@ -128,6 +128,14 @@
 			outline-color: transparent;
 		}
 	}
+
+	&.ck-widget_type-around_active_before,
+	&.ck-widget_type-around_active_after {
+		& > .ck-widget__type-around > .ck-widget__type-around__button {
+			pointer-events: none;
+			opacity: 0;
+		}
+	}
 }
 
 /*
@@ -191,18 +199,18 @@
 
 @keyframes ck-widget-type-around-line-pulse {
 	0% {
-		background: hsla(var(--ck-color-focus-border-coordinates), 0);
+		background: hsla(0, 0%, 0%, 0);
 	}
-	40% {
-		background: hsla(var(--ck-color-focus-border-coordinates), 0);
+	49% {
+		background: hsla(0, 0%, 0%, 0);
 	}
 	50% {
-		background: hsla(var(--ck-color-focus-border-coordinates), 1);
+		background: hsla(0, 0%, 0%, 1);
 	}
-	90% {
-		background: hsla(var(--ck-color-focus-border-coordinates), 1);
+	99% {
+		background: hsla(0, 0%, 0%, 1);
 	}
 	100% {
-		background: hsla(var(--ck-color-focus-border-coordinates), 0);
+		background: hsla(0, 0%, 0%, 0);
 	}
 }

+ 2 - 2
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -72,11 +72,11 @@
 		right: 0;
 
 		&.ck-widget__type-around__line_before {
-			top: calc(-1 * var(--ck-widget-outline-thickness));
+			top: -1px;
 		}
 
 		&.ck-widget__type-around__line_after {
-			bottom: calc(-1 * var(--ck-widget-outline-thickness));
+			bottom: -1px;
 		}
 	}