diff --git a/client/css/core-general.styl b/client/css/core-general.styl index 7e5883aa..942ca3d0 100644 --- a/client/css/core-general.styl +++ b/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 diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl index cb6b0067..30ee6c2a 100644 --- a/client/css/post-upload.styl +++ b/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 diff --git a/client/js/util/views.js b/client/js/util/views.js index 38c98a13..41d2fa37 100644 --- a/client/js/util/views.js +++ b/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" }) ); }