Merge branch 'various-css-fixes' into shigusegubu

* various-css-fixes:
  fix play-on-hover gifs issues
  fix preview spinner
  Refactor desktop navbar into a component, change layout to grid for better compatibility with search field and simpler CSS

src/components/desktop_nav/desktop_nav.scss

@@ -1,15 +1,20 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  display: grid;
   height: 50px;
+  width: 100%;
+  position: fixed;
+
+  .inner-nav {
+    display: grid;
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
-  width: 100%;
-  position: fixed;
     box-sizing: border-box;
     padding: 0 1.2em;
+    margin: auto;
+    max-width: 980px;
+  }
 
   &.-logoLeft {
     grid-template-columns: auto 2fr 2fr;
@@ -17,7 +22,7 @@
   }
 
   button {
-    &, i[class*=icon-], svg {
+    &, svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
     }

src/components/desktop_nav/desktop_nav.vue

@@ -5,6 +5,7 @@
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
     >
+    <div class="inner-nav">
       <div class="item sitename">
         <router-link
           v-if="!hideSitename"
@@ -70,6 +71,7 @@
             :title="$t('login.logout')"
             /></a>
       </div>
+      </div>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>