New SSL interstitial (behind Finch flag)

chrome/browser/resources/ssl/overridable_v2.css

Index: chrome/browser/resources/ssl/overridable_v2.css
diff --git a/chrome/browser/resources/ssl/overridable_v2.css b/chrome/browser/resources/ssl/overridable_v2.css
new file mode 100644
index 0000000000000000000000000000000000000000..8929e6836872686647f16f48c45dcd5f57a65940
--- /dev/null
+++ b/chrome/browser/resources/ssl/overridable_v2.css
@@ -0,0 +1,71 @@
+a {
+  color: rgb(43, 43, 43);
+}
+
+body {
+  background: rgb(247, 247, 247);
+  color: rgb(43, 43, 43);
+  line-height: 20pt;
+}
+
+button {
+  background: rgb(76, 142, 250);
+  border: 0;
+  border-box: box-sizing;

[edwardjung, 2014/05/28 13:41:27]

I know this is my fault, should be the other way round.

box-sizing: border-box;

[felt, 2014/06/02 17:58:46]

Done.

+  border-radius: 2px;
+  color: #fff;
+  float: right;
+  margin: -6px 0 0;
+  padding: 8px 24px;
+}
+
+#details {
+  margin: 40px 0 150px 0;
+}
+
+h1 {
+  -webkit-margin-after: 15px;
+  font-size: 22pt;

[edwardjung, 2014/05/28 13:41:27]

For accessibility I would use relative font sizes (em's or %). If the user has
the default font size set to something else like 'larger' the font-sizes would
scale up accordingly, but not if using absolute sizes.

Same for the line-height too defined here and the body.

[felt, 2014/06/02 17:58:46]

Switched to using em everywhere.

+  font-weight: normal;
+  line-height: 28px;
+}
+
+.hidden {
+  display: none;
+}
+
+.icon {
+  background: url(images/lock_red.png) no-repeat;
+  background-size: 100%;
+  height: 69px;
+  margin: 0 0 40px;
+  width: 56px;
+}
+
+.interstitial-wrapper {
+  box-sizing: border-box;
+  margin: 10% auto 0;
+  max-width: 582px;
+  width: 100%;
+}
+
+.nav-wrapper {
+  margin-top: 60px;
+}
+
+.nav-wrapper::after {
+  clear: both;
+  content: '';
+  display: table;
+  width: 100%;
+}
+
+p {
+  margin-bottom: 22px;
+}
+
+@media (max-width: 700px) {
+  .interstitial-wrapper {
+    padding: 0 10%;
+  }
+}