1 files changed, 168 insertions, 0 deletions
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
new file mode 100644
index 00000000000..ebb175a5793
--- /dev/null
+++ b/core/css/mobile.scss
@@ -0,0 +1,168 @@
+/*!
+ * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+@use 'variables';
+
+@media only screen and (width < #{variables.$breakpoint-mobile}) {
+
+	/* position share dropdown */
+	#dropdown {
+		margin-inline-end: 10% !important;
+		width: 80% !important;
+	}
+
+	/* fix name autocomplete not showing on mobile */
+	.ui-autocomplete {
+		z-index: 1000 !important;
+	}
+
+	/* fix error display on smaller screens */
+	.error-wide {
+		width: 100%;
+		margin-inline-start: 0 !important;
+		box-sizing: border-box;
+	}
+
+	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
+	#app-navigation:not(.vue) {
+		transform: translateX(-#{variables.$navigation-width});
+		position: fixed;
+		height: var(--body-height);
+	}
+	.snapjs-left {
+		#app-navigation {
+			transform: translateX(0);
+		}
+	}
+
+	#app-navigation:not(.hidden) + #app-content {
+		margin-inline-start: 0;
+	}
+
+	.skip-navigation.skip-content {
+		inset-inline-start: 3px;
+		margin-inline-start: 0;
+	}
+
+	/* full width for message list on mobile */
+	.app-content-list {
+		background: var(--color-main-background);
+		flex: 1 1 100%;
+		// make full height scroll since app-content-details is hidden
+		max-height: unset;
+		// ignore 300px default max width
+		max-width: 100%;
+		+ .app-content-details {
+			display: none;
+		}
+		&.showdetails {
+			display: none;
+			+ .app-content-details {
+				display: initial;
+			}
+		}
+	}
+
+	/* Show app details page */
+	#app-content.showdetails {
+		#app-navigation-toggle {
+			transform: translateX(-44px);
+		}
+		#app-navigation-toggle-back {
+			position: fixed;
+			display: inline-block !important;
+			top: variables.$header-height;
+			inset-inline-start: 0;
+			width: 44px;
+			height: 44px;
+			z-index: 1050; // above app-content
+			background-color: rgba(255, 255, 255, .7);
+			cursor: pointer;
+			opacity: .6;
+			transform: rotate(90deg);
+		}
+		.app-content-list {
+			transform: translateX(-100%);
+		}
+
+	}
+
+	#app-navigation-toggle {
+		position: fixed;
+		display: inline-block !important;
+		inset-inline-start: 0;
+		width: 44px;
+		height: 44px;
+		z-index: 1050; // above app-content
+		cursor: pointer;
+		opacity: 0.6;
+	}
+	#app-navigation-toggle:hover,
+	#app-navigation-toggle:focus {
+		opacity: 1;
+	}
+
+	/* position controls for apps with app-navigation */
+	#app-navigation + #app-content .files-controls {
+		padding-inline-start: 44px;
+	}
+
+	/* .viewer-mode is when text editor, PDF viewer, etc is open */
+	#body-user .app-files.viewer-mode .files-controls {
+		padding-inline-start: 0 !important;
+	}
+	.app-files.viewer-mode #app-navigation-toggle {
+		display: none !important;
+	}
+
+	table.multiselect thead {
+		inset-inline-start: 0 !important;
+	}
+
+	/* prevent overflow in user management controls bar */
+	#usersearchform {
+		display: none;
+	}
+	#body-settings .files-controls {
+		min-width: variables.$breakpoint-mobile !important;
+	}
+
+	/* end of media query */
+}
+
+@media only screen and (max-width: 480px) {
+	#header .header-end > div > .menu {
+		max-width: calc(100vw - 10px);
+		position: fixed;
+		&::after {
+			display: none !important;
+		}
+	}
+	/* Arrow directly child of menutoggle */
+	#header .header-end > div {
+		&.openedMenu {
+			&::after {
+				display: block;
+			}
+		}
+		&::after {
+			border: 10px solid transparent;
+			border-bottom-color: var(--color-main-background);
+			bottom: 0;
+			content: ' ';
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+			inset-inline-end: 15px;
+			z-index: 2001;
+			display: none;
+		}
+
+		/* settings need a different offset, since they have a right padding */
+		&#settings::after {
+			inset-inline-end: 27px;
+		}
+	}
+}