1 files changed, 40 insertions, 1 deletions
diff --git a/src/ui/site.css b/src/ui/site.css
index 84bba0e..12b922c 100644
--- a/src/ui/site.css
+++ b/src/ui/site.css
@@ -27,13 +27,41 @@ html.no-js .js-only.js-only.js-only {
     display: block;
     margin-right: 8px;
     text-decoration: none;
+    position: relative;
 }
 .image-attachment-image {
     display: block;
     border: 4px solid white;
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
+       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
             box-shadow: 0 1px 2px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
 }
+a.image-attachment:hover .image-attachment-image {
+    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
+       -moz-box-shadow: 0 2px 6px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
+            box-shadow: 0 2px 6px rgba(0,0,0,.33), 0 0 1px rgba(0,0,0,.33), 0 1px 1px rgba(0,0,0,.075) inset;
+}
+.image-attachment .attachment-lock {
+    position: absolute;
+    color: white;
+    right: 6px;
+    top: 6px;
+    text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+.image-attachment .video-player-icon {
+    position: absolute;
+    color: white;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+       -moz-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+         -o-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0,0,0,.5);
+    font-size: 18px;
+}
 .margin-right { margin-right: 8px; }
 .margin-left { margin-left: 8px; }
 .margin-top { margin-top: 8px; }
@@ -68,7 +96,9 @@ html.no-js .js-only.js-only.js-only {
     left: 5px;
     top: 50%;
     -webkit-transform: translateY(-50%);
+       -moz-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
+         -o-transform: translateY(-50%);
             transform: translateY(-50%);
     z-index: -1;
     text-shadow: none;
@@ -92,12 +122,16 @@ html.no-js .js-only.js-only.js-only {
     left: 0;
     right: 0;
     bottom: 0;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(56%, white));
+    background-image: -webkit-linear-gradient(transparent, white 56%);
+    background-image: -moz-linear-gradient(transparent, white 56%);
+    background-image: -o-linear-gradient(transparent, white 56%);
     background-image: linear-gradient(transparent, white 56%);
     padding: 80px 8px 8px;
     text-align: center;
     z-index: 0;
 }
-.post-container-controls::after {
+.post-container-controls:after {
     content: "";
     display: block;
     position: absolute;
@@ -129,3 +163,8 @@ html.no-js .js-only.js-only.js-only {
 #group0 {
     display: none !important;
 }
+.attachment-view {
+    display: block;
+    width: 100%;
+    height: auto;
+}