Seperate information overlay CSS into own file.

This takes the information overlay CSS and moves it from zulip.css to
informational-overlays.css to help separate out isolated components.

static/styles/informational-overlays.css

@@ -0,0 +1,85 @@
+.informational-overlays {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 102;
+
+    opacity: 0;
+    pointer-events: none;
+
+    background-color: rgba(0,0,0,0.8);
+    transition: all 0.3s ease;
+}
+
+.informational-overlays.show {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.informational-overlays .overlay-content {
+    /* because zoom breaks at 525px perhaps due to rounding errors, so add a
+       trivial amount of width so it doesn't break. */
+    width: 525.03px;
+    margin: 0 auto;
+    position: relative;
+    top: calc((30vh - 50px) / 2);
+    border-radius: 4px;
+    overflow: hidden;
+
+    background-color: #fff;
+}
+
+.informational-overlays .overlay-content h1 {
+    padding: 0px 0px 7px 10px;
+
+    font-weight: 300;
+    font-size: 1.8em;
+
+    border-bottom: 1px solid #eee;
+}
+
+.informational-overlays .overlay-tabs {
+    border-bottom: 1px solid #eee;
+    background-color: #888;
+}
+
+.informational-overlays .overlay-tabs .tab {
+    float: left;
+    width: calc(33.33% - 1.1px);
+
+    text-align: center;
+    padding: 12px 0px;
+    border-right: 1px solid #eee;
+    background-color: #fff;
+
+    cursor: pointer;
+}
+
+.informational-overlays .overlay-tabs .tab:last-of-type {
+    border-right: none;
+}
+
+.informational-overlays .overlay-tabs .tab.active {
+    background-color: #888;
+    color: #fff;
+    border-color: transparent;
+}
+
+.informational-overlays .overlay-modal .modal-body {
+    height: 70vh;
+}
+
+.informational-overlays .overlay-modal .modal-header h3 {
+    font-weight: 300;
+}
+
+.informational-overlays .overlay-modal .modal-body th {
+    font-weight: 400;
+}
+
+.informational-overlays td.operator {
+    font-size: 0.9em;
+}

static/styles/zulip.css

@@ -1593,73 +1593,6 @@ blockquote p {
     z-index: 5;
 }
 
-.informational-overlays {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 102;
-
-    opacity: 0;
-    pointer-events: none;
-
-    background-color: rgba(0,0,0,0.8);
-    transition: all 0.3s ease;
-}
-
-.informational-overlays.show {
-    visibility: visible;
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.informational-overlays .overlay-content {
-    width: 525px;
-    margin: 0 auto;
-    position: relative;
-    top: calc(50vh - 30vh - 90px);
-    border-radius: 4px;
-    overflow: hidden;
-
-    background-color: #fff;
-}
-
-.informational-overlays .overlay-tabs {
-    border-bottom: 1px solid #eee;
-}
-
-.informational-overlays .overlay-tabs .tab {
-    float: left;
-    width: calc(33.33% - 1px);
-
-    text-align: center;
-    padding: 15px 0px;
-    border-right: 1px solid #eee;
-
-    cursor: pointer;
-}
-
-.informational-overlays .overlay-tabs .tab.active {
-    background-color: #eee;
-}
-
-.informational-overlays .overlay-tabs .tab:last-of-type {
-    border-right: none;
-}
-
-.informational-overlays .overlay-modal .modal-header h3 {
-    font-weight: 300;
-}
-
-.informational-overlays .overlay-modal .modal-body th {
-    font-weight: 400;
-}
-
-.informational-overlays td.operator {
-    font-size: 0.9em;
-}
-
 
 nav .column-left {
     text-align: center;

templates/zerver/index.html

@@ -129,7 +129,7 @@ var page_params = {{ page_params }};
             <div class="overlay-tabs">
                 <div class="tab active" data-overlay-trigger="keyboard-shortcuts">Keyboard Shortcuts</div>
                 <div class="tab" data-overlay-trigger="search-operators">Search Help</div>
-                <div class="tab" data-overlay-trigger="markdown-help">Markdown Formatting</div>
+                <div class="tab last" data-overlay-trigger="markdown-help">Markdown Formatting</div>
                 <div class="float-clear"></div>
             </div>
             <div class="overlay-body">

zproject/settings.py

@@ -691,6 +691,7 @@ PIPELINE = {
                 'styles/zulip.css',
                 'styles/settings.css',
                 'styles/subscriptions.css',
+                'styles/informational-overlays.css',
                 'styles/compose.css',
                 'styles/reactions.css',
                 'styles/left-sidebar.css',
@@ -712,6 +713,7 @@ PIPELINE = {
                 'styles/zulip.css',
                 'styles/settings.css',
                 'styles/subscriptions.css',
+                'styles/informational-overlays.css',
                 'styles/compose.css',
                 'styles/reactions.css',
                 'styles/left-sidebar.css',