Issue #2352857 by thamas, tkoleary: Fixed Improve the display of trigger icon (pencil).

core/modules/contextual/css/contextual.icons.css

@@ -23,13 +23,17 @@
   background-repeat: no-repeat;
   background-size: 16px 16px;
   /* Override the .focusable height: auto */
-  height: 28px !important;
+  height: 26px !important;
   /* Override the .focusable height: auto */
-  width: 28px !important;
+  width: 26px !important;
   text-indent: -9999px;
 }
 
-.contextual .trigger:focus,
 .contextual .trigger:hover {
   background-image: url(../../../misc/icons/787878/pencil.svg);
 }
+
+.contextual .trigger:focus {
+  background-image: url(../../../misc/icons/5181c6/pencil.svg);
+  outline: none;
+}

core/modules/contextual/css/contextual.theme.css

@@ -9,7 +9,7 @@
 .contextual {
   position: absolute;
   right: 0; /* LTR */
-  top: 2px;
+  top: 6px;
   z-index: 500;
 }
 [dir="rtl"] .contextual {
@@ -31,23 +31,23 @@
 .contextual .trigger {
   background-attachment: scroll;
   background-color: #fff;
-  border: 1px solid #ddd;
+  border: 1px solid #ccc;
   border-radius: 13px;
-  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   float: right; /* LTR */
   margin: 0;
   overflow: hidden;
   padding: 0 2px;
   position: relative;
-  right: 2px; /* LTR */
+  right: 6px; /* LTR */
   cursor: pointer;
 }
 [dir="rtl"] .contextual .trigger {
   float: left;
   right: auto;
-  left: 2px;
+  left: 6px;
 }
 .contextual.open .trigger {
+  border: 1px solid #ccc;
   border-bottom-color: transparent;
   border-radius: 13px 13px 0 0;
   box-shadow: none;
@@ -61,14 +61,14 @@
  */
 .contextual-region .contextual .contextual-links {
   background-color: #fff;
-  border: 1px solid #ddd;
+  border: 1px solid #ccc;
   border-radius: 4px 0 4px 4px; /* LTR */
   clear: both;
   float: right; /* LTR */
   margin: 0;
   padding: 0.25em 0;
   position: relative;
-  right: 2px; /* LTR */
+  right: 6px; /* LTR */
   text-align: left; /* LTR */
   top: -1px;
   white-space: nowrap;
@@ -76,7 +76,7 @@
 [dir="rtl"] .contextual-region .contextual .contextual-links {
   border-radius: 0 4px 4px 4px;
   float: left;
-  left: 2px;
+  left: 6px;
   right: auto;
   text-align: right;
 }

core/themes/bartik/css/style.css

@@ -1680,6 +1680,10 @@ div.password-suggestions {
 #forum .description {
   font-size: 1em;
 }
+#header .contextual .trigger,
+#footer-wrapper .contextual .trigger {
+  border: none;
+}
 
 /* ---------- Color Form ----------- */