Organize security panel main view.

Source/devtools/front_end/security/mainView.css

Index: Source/devtools/front_end/security/mainView.css
diff --git a/Source/devtools/front_end/security/mainView.css b/Source/devtools/front_end/security/mainView.css
new file mode 100644
index 0000000000000000000000000000000000000000..1ac4494080608390c2aa8bb6b6c50a6b4d1c34c0
--- /dev/null
+++ b/Source/devtools/front_end/security/mainView.css
@@ -0,0 +1,58 @@
+/* Copyright (c) 2015 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.security-main-view {
+    -webkit-user-select: text;
+}
+
+.security-main-view .section {

[dgozman, 2015/08/26 20:28:41]

Let's use more specific classes to simplify searching in codebase. Something
like "security-section" and "security-summary".

[lgarron, 2015/08/26 21:42:43]

Done.

+    padding: 1em;
+    border-bottom: 1px solid rgb(230, 230, 230);
+
+    display: flex;
+    white-space: nowrap;
+}
+
+.security-main-view .summary.section .lock-icon {
+    flex: none;
+    width: 32px;
+    height: 32px;
+    margin-right: 1em;
+}
+
+.security-main-view .summary.section .text .title {
+    font-size: 14px;
+    margin-bottom: 2px;
+}
+
+.security-main-view .summary.section .explanation.security-state-secure {
+    color: rgb(42, 194, 57);
+}
+
+.security-main-view .summary.section .explanation.security-state-neutral {
+    color: rgb(253, 177, 48);
+}
+
+.security-main-view .summary.section .explanation.security-state-insecure {
+    color: rgb(216, 71, 60);
+}
+
+.security-main-view .explanation.section .lock-icon {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+    margin-right: 18px;
+}
+
+.security-main-view .section .text {
+    flex: auto;
+    white-space: normal;
+}
+
+.security-main-view .explanation.section .text .title {
+    color: rgb(90, 90, 90);
+    margin-bottom: 8px;
+}