client/css: prevent thumbnail dragging, fix ff upload thumbnail outline

client/css/core-general.styl

@@ -106,6 +106,11 @@ form .fa-question-circle-o
                     background-color: $scrollbar-bg-color
                 &::-webkit-scrollbar-thumb
                     background-color: $scrollbar-thumb-color
+                li[data-name=view]
+                    background: $button-enabled-background-color
+                    margin-right: 1em
+                    a
+                        color: $button-enabled-text-color
     >.content-wrapper:not(.transparent)
         background: $top-navigation-color
         padding: 1.8em
@@ -214,8 +219,6 @@ nav
         ul li[data-name=settings],
         ul li[data-name=help]
             float: none
-        .access-key
-            text-decoration: underline
         .thumbnail
             width: 1.5em
             height: 1.5em
@@ -244,9 +247,6 @@ nav
             #mobile-navigation-toggle
                 color: $text-color-darktheme
 
-a .access-key
-    text-decoration: underline
-
 .messages
     margin: 0 auto
     text-align: left
@@ -284,28 +284,24 @@ a .access-key
     /*background-image: attr(data-src url)*/ /* not available yet */
     vertical-align: middle
     background-repeat: no-repeat
-    background-size: cover
+    background-size: contain
     background-position: center
     display: inline-block
     width: 20px
     height: 20px
     &.empty
         background-image:
-            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
-            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
-        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
-        background-repeat: repeat
-        background-size: 20px 20px
-    img
+            repeating-linear-gradient(45deg, $window-color, $window-color 10px, #e6e6e6 10px, #e6e6e6 20px)
+    img, video
         opacity: 0
-        width: auto
-        height: 100%
-    video
-        width: auto
+        object-fit: cover
+        width: 100%
         height: 100%
 
+.darktheme .thumbnail.empty
+    background-image:
+        repeating-linear-gradient(45deg, $window-color-darktheme, $window-color-darktheme 10px, #333 10px, #333 20px)
+
 .flexbox-dummy
     height: 0 !important
     padding-top: 0 !important

client/css/post-upload.styl

@@ -62,22 +62,18 @@ $cancel-button-color = tomato
             margin: 0 0 1.2em 0
             padding-left: 13em
 
-            img
-                width: 100%
-                height: 100%
-            
-            video
-                width: 100%
-                height: 100%
-
             &>.thumbnail-wrapper
                 float: left
                 width: 12em
                 height: 8em
                 margin: 0 0 0 -13em
-                .thumbnail
-                    width: 100%
+                a
+                    display: block
                     height: 100%
+                    width: 100%
+                    .thumbnail
+                        width: 100%
+                        height: 100%
 
             .uploadable
                 border: 1px solid $upload-border-color

client/js/util/views.js

@@ -49,7 +49,7 @@ function makeThumbnail(url) {
                   style: `background-image: url(\'${url}\')`,
               }
             : { class: "thumbnail empty" },
-        makeElement("img", { alt: "thumbnail", src: url })
+        makeElement("img", { alt: "thumbnail", src: url, draggable: "false" })
     );
 }