DevTools Security panel: Update the security overview to match the new Material specs.

third_party/WebKit/Source/devtools/front_end/security/mainView.css

Index: third_party/WebKit/Source/devtools/front_end/security/mainView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/security/mainView.css b/third_party/WebKit/Source/devtools/front_end/security/mainView.css
index af616ad0f88c9e363bdc32e3d5dd56b283decdaf..28095e9e4c72a3570c87a88bd8c95ddc11044994 100644
--- a/third_party/WebKit/Source/devtools/front_end/security/mainView.css
+++ b/third_party/WebKit/Source/devtools/front_end/security/mainView.css
@@ -7,20 +7,16 @@
     -webkit-user-select: text;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: #f9f9f9;
+    background-color: #FAFAFA;
 }
 
 .security-main-view > div {
     flex-shrink: 0;
 }
 
-.security-summary {
-    background-color: #fff;
-}
-
 .security-summary-section-title {
     font-size: 14px;
-    margin: 12px 16px;
+    margin: 14px 16px 12px;
 }
 
 .lock-spectrum {
@@ -29,14 +25,7 @@
     align-items: flex-start;
 }
 
-.security-summary .lock-icon {
-    flex: none;
-    width: 16px;
-    height: 16px;
-    margin: 0 0;
-}
-
-/* Separate the middle icon from the other two. */
+/* Separate the middle lock icon from the other two. */
 .security-summary .lock-icon-neutral {
     margin: 0 16px;
 }
@@ -54,24 +43,10 @@
 
 .triangle-pointer-wrapper {
     /* Defaults for dynamic properties. */
-    transform: translateX(0);
+    transform: translateX(32px);
     transition: transform 0.3s;
 }
 
-.triangle-pointer {
-    width: 12px;
-    height: 12px;
-    margin-bottom: -6px;
-    margin-left: -6px;
-    transform: rotate(-45deg);
-    border-style: solid;
-    border-width: 1px 1px 0 0;
-
-    /* Defaults for dynamic properties. */
-    background: rgb(243, 243, 243);
-    border-color: rgb(217, 217, 217);
-}
-
 .security-summary-secure .triangle-pointer-wrapper {
     transform: translateX(0px);
 }
@@ -84,59 +59,43 @@
     transform: translateX(64px);
 }
 
-.security-summary-text {
-    padding: 12px 24px;
+.triangle-pointer {
+    width: 12px;
+    height: 12px;
+    margin-bottom: -6px;
+    margin-left: -6px;
+    transform: translateY(0.3px) rotate(-45deg);
     border-style: solid;
-    border-width: 1px 0;
-
-    /* Defaults for dynamic properties. */
-    background: rgb(243, 243, 243);
-    border-color: rgb(217, 217, 217);
-    color: rgb(127, 127, 127);
+    border-width: 1px 1px 0 0;
+    background: white;
+    border-color: rgba(0, 0, 0, 0.14);
 }
 
-.security-summary-secure .triangle-pointer,
-.security-summary-secure .security-summary-text {
-    background: rgb(243, 252, 244);
-    border-color: rgb(137, 222, 144);
-    color: rgb(42, 194, 57);
+.security-summary-text {
+    padding: 18px 16px 12px;
+    background: white;
+    font-size: 14px;
+    border-top: 1px solid rgba(0, 0, 0, 0.14);
 }
 
-.security-summary-neutral .triangle-pointer,
-.security-summary-neutral .security-summary-text {
-    background: rgb(255, 251, 243);
-    border-color: rgb(253, 214, 129);
-    color: rgb(253, 177, 48);
+.security-summary-secure .security-summary-text {
+    color: #0B8043;
 }
 
-.security-summary-insecure .triangle-pointer,
+.security-summary-neutral .security-summary-text,
 .security-summary-insecure .security-summary-text {
-    background: rgb(253, 245, 245);
-    border-color: rgb(243, 157, 151);
-    color: rgb(216, 70, 60);
+    color: #C63626;
 }
 
-.security-explanation {
-    padding: 16px;
+.security-explanation-list:not(.security-explanations-extra) {
+    background: white;
+    padding-bottom: 16px;
     border-bottom: 1px solid rgb(230, 230, 230);
-    background-color: #fff;
-
-    display: flex;
-    white-space: nowrap;
-}
-
-.security-explanation-text {
-    flex: auto;
-    white-space: normal;
-    max-width: 400px;
 }
 
-.security-explanations-extra .security-explanation {
-    background-color: transparent;
-}
-
-.security-explanations-extra .security-explanation:only-child {
-    border-bottom: none;
+.security-explanation {
+    padding: 12px 16px;
+    display: flex;
 }
 
 .security-certificate-button {
@@ -145,29 +104,19 @@
 
 .security-explanation .security-property {
     flex: none;
-    width: 16px;
-    height: 16px;
     margin-right: 16px;
 }
 
 .security-explanation-title {
-    color: rgb(90, 90, 90);
-    margin-top: 1px;
-    margin-bottom: 8px;
+    color: black;
+    margin-bottom: 4px;
 }
 
-.security-explanation-neutral .security-section-title,
-.security-explanation-warning .security-section-title
-{
-    color: rgb(253, 177, 48);
-    font-weight: bold;
-}
-.security-explanation-insecure .security-section-title
-{
-    color: rgb(216, 71, 60);
-    font-weight: bold;
+.security-explanation-text {
+    max-width: 400px;
+    color: rgba(0, 0, 0, 0.55);
 }
 
 .security-mixed-content {
-    margin-top: 8px;
+    margin-top: 4px;
 }