Bug 1421395 - change focus ring in console from gray dotted line to blue, change active input caret color to toolbar-checked-color. r?nchevobbe draft
authorKentaro Teramoto <hrlclb@gmail.com>
Sat, 27 Jan 2018 08:33:33 +0900
changeset 747870 e67d0da68eed4812a02fd9d08a88c9f7d40c3792
parent 714849 e02699fd3129bef049f848e2f71189182eabe555
push id97029
push userbmo:hrlclb@gmail.com
push dateFri, 26 Jan 2018 23:35:24 +0000
reviewersnchevobbe
bugs1421395
milestone59.0a1
Bug 1421395 - change focus ring in console from gray dotted line to blue, change active input caret color to toolbar-checked-color. r?nchevobbe MozReview-Commit-ID: 6fUAi4199Yb
devtools/client/themes/images/commandline-icon.svg
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/images/commandline-icon.svg
+++ b/devtools/client/themes/images/commandline-icon.svg
@@ -11,20 +11,20 @@
       #light-theme:target,
       #light-theme-focus:target ~ #light-theme,
       #dark-theme:target,
       #dark-theme-focus:target ~ #dark-theme {
         display: inline;
       }
 
       #light-theme-focus:target ~ #light-theme {
-        fill: #4A90E2;
+        fill: #0060DF;
       }
       #dark-theme-focus:target ~ #dark-theme {
-        fill: #00FF7F;
+        fill: #75BFFF;
       }
 
       /* Unfocused states */
       #light-theme,
       #dark-theme {
         fill: rgba(128, 128, 128, .5);
       }
     </style>
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -841,16 +841,26 @@ a.learn-more-link.webconsole-learn-more-
   display: flex;
   width: 100%;
   align-items: center;
   -moz-user-select: none;
 }
 
 .webconsole-filterbar-primary .devtools-plaininput {
   flex: 1 1 100%;
+  align-self: stretch;
+  margin-left: 1px;
+  padding-inline-start: 4px;
+  border: 1px solid transparent;
+}
+
+.devtools-plaininput:focus {
+  border: 1px solid var(--blue-50);
+  transition: all 0.2s ease-in-out;
+  outline: none;
 }
 
 .webconsole-filterbar-primary .filter-checkbox {
   flex-shrink: 0;
   margin: 0 3px;
   display: flex;
   align-items: center;
   -moz-user-select: none;