Update runtime app & usermenu styles

owncloud · Sep 2, 2021 · 6942367 · 6942367
1 parent d764b03
commit 6942367
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 21 deletions.
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -6,12 +6,12 @@
     </skip-to>
     <div
       v-if="user.isAuthenticated && !user.userReady"
-      class="loading-overlay"
+      class="loading-overlay uk-flex uk-flex-middle uk-flex-center"
       :style="{
         backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
       }"
     >
-      <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
+      <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" />
     </div>
     <template v-else-if="!showHeader">
       <router-view name="fullscreen" />
@@ -402,7 +402,7 @@ export default {
   }
 }
 </script>
-<style>
+<style lang="scss">
 html,
 body,
 #web,
@@ -439,10 +439,6 @@ body,
   overflow-y: auto;
 }
 
-#oc-header {
-  grid-area: header;
-}
-
 .oc-app-navigation {
   position: sticky;
   top: 0;
@@ -452,21 +448,18 @@ body,
 .loading-overlay {
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 50%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+  background-position: center;
   height: 100%;
-}
-
-.loading-overlay .oc-spinner {
-  color: #0a264e;
-}
+  width: 100%;
 
-.loading-overlay .oc-spinner:after {
-  border: 10px solid;
-  border-bottom: 10px solid transparent;
+  .oc-spinner {
+    color: #0a264e;
+    display: inline-block;
+    &::after {
+      border: 10px solid;
+      border-bottom: 10px solid transparent;
+    }
+  }
 }
 
 @media only screen and (max-width: 960px) {

diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
@@ -10,7 +10,7 @@
     >
       <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle oc-px-s"
           :width="24"
           :userid="userId"
           :user-name="userDisplayName"