refactor: split up CSS globals

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/bootstrap.ts

@@ -23,8 +23,7 @@ import type videojsType from 'video.js';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 // Global CSS
-import './global.scss';
+import './styles/global.scss';
-import './native.scss';
 
 // Global exposed variables
 declare global {

src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside id="app-sidebar-vue" class="app-sidebar reduced hide-scrollbar" v-if="reducedOpen">
+  <aside id="app-sidebar-vue" class="app-sidebar reduced" v-if="reducedOpen">
     <div class="title">
       <h2>{{ basename }}</h2>
 
@@ -213,4 +213,16 @@ export default defineComponent({
 .vs__dropdown-menu--floating {
   z-index: 2526;
 }
+
+// Make metadata tab scrollbar thin
+#tab-memories-metadata,
+.app-sidebar.reduced {
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
 </style>

src/global.scss

@@ -1,182 +0,0 @@
-body {
-  overflow: hidden;
-
-  * {
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-  }
-}
-
-// Nextcloud 25+: get rid of gap and border radius at right
-#content-vue.remove-gap {
-  // was var(--body-container-radius)
-  // now set on #app-navigation-vue
-  border-radius: 0;
-  width: calc(100% - var(--body-container-margin) * 1); // was *2
-  margin-right: 0;
-
-  // If no navigation remove both margins
-  &:not(.has-nav) {
-    width: calc(100%);
-    margin-left: 0;
-  }
-
-  // Reduce size of navigation. NC <25 doesn't like this on mobile.
-  #app-navigation-vue {
-    max-width: 250px;
-  }
-}
-
-// Prevent content overflow on NC <25
-#content-vue {
-  max-height: 100vh;
-
-  // https://bugs.webkit.org/show_bug.cgi?id=160953
-  overflow: visible;
-  #app-navigation-vue {
-    border-top-left-radius: var(--body-container-radius);
-    border-bottom-left-radius: var(--body-container-radius);
-
-    .app-navigation-toggle {
-      // Move up to align with back button of top matter
-      top: 2px;
-      transition: opacity 0.1s ease-in-out;
-      opacity: 0.2; // It's ugly
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-// Top bar is above everything else on mobile
-body.has-top-bar header {
-  @media (max-width: 1024px) {
-    z-index: 0 !important;
-  }
-}
-body.has-viewer header {
-  z-index: 0 !important;
-}
-
-// Allow hiding app name (PublicShareHeader)
-header#header .header-appname {
-  transition: opacity 0.2s ease-in-out;
-  &.hidden {
-    opacity: 0 !important;
-  }
-}
-
-// Hide horizontal scrollbar on mobile
-// For the padding removal above
-#app-content-vue {
-  overflow-x: hidden;
-}
-
-// Fill all available space
-.fill-block {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-// Make popper menus full height
-.v-popper--theme-dropdown .v-popper__inner {
-  max-height: calc(90vh - 16px) !important; // was 50vh
-  margin: 0 10px; // was unset
-}
-
-// Live Photo transitions
-.memories-livephoto {
-  position: relative;
-  overflow: hidden;
-
-  img,
-  video {
-    position: absolute;
-    padding: inherit;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    z-index: 1;
-    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  }
-
-  video {
-    opacity: 0;
-    z-index: 2;
-    visibility: hidden;
-  }
-
-  &.playing.canplay {
-    video {
-      opacity: 1;
-      visibility: visible;
-      transition: opacity 0.3s ease-in-out, visibility 0s ease-in-out;
-    }
-    img {
-      transform: scale(1.05);
-    }
-  }
-}
-
-// Hide scrollbar
-@mixin hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-    width: 0 !important;
-  }
-}
-.hide-scrollbar {
-  @include hide-scrollbar;
-}
-.hide-scrollbar-mobile {
-  @media (max-width: 768px) {
-    @include hide-scrollbar;
-  }
-}
-
-// Disable user selection
-.no-user-select {
-  user-select: none;
-  -webkit-user-select: none; // iOS Safari is a horrible browser
-}
-
-// Make OC dialogs larger to a minimum width
-div.oc-dialog[role='dialog'] {
-  min-width: min(400px, 90vw);
-
-  // This close button is annoying since it does
-  // the same thing as the cancel button but needs
-  // two tabs to reach the OK button when visible.
-  button.oc-dialog-close {
-    display: none;
-  }
-}
-
-// Make metadata tab scrollbar thin
-#tab-memories-metadata {
-  scrollbar-width: thin;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
-
-// Make sure empty content is full width
-[role='note'].empty-content {
-  width: 100%;
-}
-
-// Make NcListItem border-box to prevent overflow
-li.list-item__wrapper {
-  > a.list-item {
-    box-sizing: border-box;
-  }
-}

src/styles/body.scss

@@ -0,0 +1,56 @@
+body {
+  overflow: hidden;
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+}
+
+// Nextcloud 25+: get rid of gap and border radius at right
+#content-vue.remove-gap {
+  // was var(--body-container-radius)
+  // now set on #app-navigation-vue
+  border-radius: 0;
+  width: calc(100% - var(--body-container-margin) * 1); // was *2
+  margin-right: 0;
+
+  // If no navigation remove both margins
+  &:not(.has-nav) {
+    width: calc(100%);
+    margin-left: 0;
+  }
+
+  // Reduce size of navigation. NC <25 doesn't like this on mobile.
+  #app-navigation-vue {
+    max-width: 250px;
+  }
+}
+
+// Prevent content overflow on NC <25
+#content-vue {
+  max-height: 100vh;
+
+  // https://bugs.webkit.org/show_bug.cgi?id=160953
+  overflow: visible;
+  #app-navigation-vue {
+    border-top-left-radius: var(--body-container-radius);
+    border-bottom-left-radius: var(--body-container-radius);
+
+    .app-navigation-toggle {
+      // Move up to align with back button of top matter
+      top: 2px;
+      transition: opacity 0.1s ease-in-out;
+      opacity: 0.2; // It's ugly
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Hide horizontal scrollbar on mobile
+// For the padding removal above
+#app-content-vue {
+  overflow-x: hidden;
+}

src/styles/global.scss

@@ -0,0 +1,6 @@
+@import 'body.scss';
+@import 'header.scss';
+@import 'utils.scss';
+@import 'livephoto.scss';
+@import 'patch.scss';
+@import 'native.scss';

src/styles/header.scss

@@ -0,0 +1,17 @@
+// Top bar is above everything else on mobile
+body.has-top-bar header {
+  @media (max-width: 1024px) {
+    z-index: 0 !important;
+  }
+}
+body.has-viewer header {
+  z-index: 0 !important;
+}
+
+// Allow hiding app name (PublicShareHeader)
+header#header .header-appname {
+  transition: opacity 0.2s ease-in-out;
+  &.hidden {
+    opacity: 0 !important;
+  }
+}

src/styles/livephoto.scss

@@ -0,0 +1,35 @@
+// Live Photo transitions
+.memories-livephoto {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  video {
+    position: absolute;
+    padding: inherit;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    z-index: 1;
+    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  }
+
+  video {
+    opacity: 0;
+    z-index: 2;
+    visibility: hidden;
+  }
+
+  &.playing.canplay {
+    video {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 0.3s ease-in-out, visibility 0s ease-in-out;
+    }
+    img {
+      transform: scale(1.05);
+    }
+  }
+}

src/styles/patch.scss

@@ -0,0 +1,29 @@
+// Make popper menus full height
+.v-popper--theme-dropdown .v-popper__inner {
+  max-height: calc(90vh - 16px) !important; // was 50vh
+  margin: 0 10px; // was unset
+}
+
+// Make sure empty content is full width
+[role='note'].empty-content {
+  width: 100%;
+}
+
+// Make NcListItem border-box to prevent overflow
+li.list-item__wrapper {
+  > a.list-item {
+    box-sizing: border-box;
+  }
+}
+
+// Make OC dialogs larger to a minimum width
+div.oc-dialog[role='dialog'] {
+  min-width: min(400px, 90vw);
+
+  // This close button is annoying since it does
+  // the same thing as the cancel button but needs
+  // two tabs to reach the OK button when visible.
+  button.oc-dialog-close {
+    display: none;
+  }
+}

src/styles/utils.scss

@@ -0,0 +1,30 @@
+// Fill all available space
+.fill-block {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+// Hide scrollbar
+@mixin hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+  }
+}
+.hide-scrollbar {
+  @include hide-scrollbar;
+}
+.hide-scrollbar-mobile {
+  @media (max-width: 768px) {
+    @include hide-scrollbar;
+  }
+}
+
+// Disable user selection
+.no-user-select {
+  user-select: none;
+  -webkit-user-select: none; // iOS Safari is a horrible browser
+}