nextcloud-server/core/css/mobile.scss

/*!
 * 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;
		}
	}
}