lightbox: Change aesthetic to white-on-blue design.

No longer is there a white information bar at the bottom. Now it is all
aligned to the top.

static/styles/components.css

@@ -63,6 +63,7 @@
 }
 
 .button.small {
+    font-size: 0.8rem;
     min-width: inherit;
     padding: 6px 10px;
 }

static/styles/overlay.css

@@ -14,6 +14,9 @@
     z-index: 101;
 
     transition: all 0.2s ease;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 #overlay.show {
@@ -23,9 +26,9 @@
 
 #overlay .image-preview {
     position: relative;
-    width: calc(100% - 40px);
+    width: calc(100% - 20px);
-    height: calc(100% - 65px - 40px);
+    height: calc(100% - 65px - 30px);
-    margin: 20px;
+    margin: 0px;
 
     background-color: #19203a;
 
@@ -34,14 +37,16 @@
     background-position: center center;
 }
 
-#overlay .image-preview .exit {
+#overlay .exit {
-    position: absolute;
+    float: right;
-    top: 0px;
-    right: 0px;
 
     color: rgba(255,255,255,0.8);
     font-size: 2rem;
     font-weight: 200;
+    margin: 22px 20px;
+
+    transform: scaleY(0.75);
+    font-weight: 300;
 
     opacity: 0;
     pointer-events: none;
@@ -49,34 +54,37 @@
     transition: all 0.2s ease;
 }
 
-#overlay .image-preview:hover .exit {
+#overlay .exit {
     pointer-events: auto;
     opacity: 1;
 }
 
 #overlay .image-info-wrapper {
-    background-color: #fff;
+    background-color: transparent;
 }
 
 #overlay .image-description,
 #overlay .image-actions {
     float: left;
-    margin: 10px 20px;
+    margin: 20px 20px;
 }
 
 #overlay .image-actions {
     float: right;
 }
 
+#overlay .image-actions a {
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
 #overlay .image-actions .icon {
     font-size: 1.1rem;
     display: inline-block;
-    margin-top: 5px;
 }
 
 #overlay .image-actions .icon .text {
     font-size: 0.9rem;
-    margin-right: 5px;
 }
 
 #overlay .image-actions span:nth-of-type(2) {
@@ -90,12 +98,14 @@
 
 #overlay .image-description {
     /* approx width of screen minus action buttons on the side. */
-    width: calc(100% - 290px);
+    width: calc(100% - 320px);
+
+    font-size: 1.3rem;
+    color: #fff;
 }
 
 #overlay .image-description .title {
-    font-size: 1.4rem;
+    font-weight: 500;
-    font-weight: 300;
     line-height: normal;
     max-width: calc(100%);
 
@@ -106,9 +116,22 @@
 }
 
 #overlay .image-description .user {
+    font-weight: 300;
+}
+
+.image-actions .button {
     font-size: 0.8rem;
-    font-weight: 600;
+    min-width: inherit;
-    color: #888;
+    padding: 4px 10px;
+    border: 1px solid rgba(255,255,255,0.6);
+    background-color: transparent;
+    color: #fff;
+    border-radius: 4px;
+}
+
+.image-actions .button:hover {
+    background-color: #fff;
+    color: #19203a;
 }
 
 .image-actions a.button {

templates/zerver/image-overlay.html

@@ -1,20 +1,21 @@
 <div id="overlay">
-  <div class="image-preview">
-    <div class="exit">x</div>
-  </div>
   <div class="image-info-wrapper">
     <div class="image-description">
-      <div class="title"></div>
+      <span class="title"></span>
-      <div class="user"></div>
+      &mdash;
+      <span class="user"></span>
     </div>
+    <div class="exit">x</div>
     <div class="image-actions">
-      <a class="button sea-green small-flex open icon" target="_blank">
+      <a class="button small open icon" target="_blank">
-        <span class="text">Open</span> <span class="icon-vector-external-link"></span>
+        <span class="text">Open</span>
       </a>
-      <a class="button sea-green small-flex download icon" download>
+      <a class="button small download icon" download>
-        <span class="text">Download</span> <span class="icon-vector-download"></span>
+        <span class="text">Download</span>
       </a>
     </div>
     <div class="clear-float"></div>
   </div>
+
+  <div class="image-preview"></div>
 </div>