nextcloud-server/core/css/mobile.css

@charset "UTF-8";
/**
 * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
 *
 * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
@media only screen and (width < 1024px) {
  /* position share dropdown */
  #dropdown {
    margin-right: 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-left: 0 !important;
    box-sizing: border-box;
  }

  /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
  #app-navigation:not(.vue) {
    transform: translateX(-300px);
    position: fixed;
    height: var(--body-height);
  }

  .snapjs-left #app-navigation {
    transform: translateX(0);
  }

  #app-navigation:not(.hidden) + #app-content {
    margin-left: 0;
  }

  .skip-navigation.skip-content {
    left: 3px;
    margin-left: 0;
  }

  /* full width for message list on mobile */
  .app-content-list {
    background: var(--color-main-background);
    flex: 1 1 100%;
    max-height: unset;
    max-width: 100%;
  }
  .app-content-list + .app-content-details {
    display: none;
  }
  .app-content-list.showdetails {
    display: none;
  }
  .app-content-list.showdetails + .app-content-details {
    display: initial;
  }

  /* Show app details page */
  #app-content.showdetails #app-navigation-toggle {
    transform: translateX(-44px);
  }
  #app-content.showdetails #app-navigation-toggle-back {
    position: fixed;
    display: inline-block !important;
    top: 50px;
    left: 0;
    width: 44px;
    height: 44px;
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    opacity: 0.6;
    transform: rotate(90deg);
  }
  #app-content.showdetails .app-content-list {
    transform: translateX(-100%);
  }

  #app-navigation-toggle {
    position: fixed;
    display: inline-block !important;
    left: 0;
    width: 44px;
    height: 44px;
    z-index: 1050;
    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-left: 44px;
  }

  /* .viewer-mode is when text editor, PDF viewer, etc is open */
  #body-user .app-files.viewer-mode .files-controls {
    padding-left: 0 !important;
  }

  .app-files.viewer-mode #app-navigation-toggle {
    display: none !important;
  }

  table.multiselect thead {
    left: 0 !important;
  }

  /* prevent overflow in user management controls bar */
  #usersearchform {
    display: none;
  }

  #body-settings .files-controls {
    min-width: 1024px !important;
  }

  /* do not show dates in filepicker */
  #oc-dialog-filepicker-content .filelist .column-size,
#oc-dialog-filepicker-content .filelist .column-mtime,
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
    display: none;
  }

  #oc-dialog-filepicker-content .filelist .filename {
    max-width: 100%;
  }

  .snapjs-left table.multiselect thead {
    top: 44px;
  }

  /* end of media query */
}
@media only screen and (max-width: 480px) {
  #header .header-right > div > .menu {
    max-width: calc(100vw - 10px);
    position: fixed;
  }
  #header .header-right > div > .menu::after {
    display: none !important;
  }

  /* Arrow directly child of menutoggle */
  #header .header-right > div {
    /* settings need a different offset, since they have a right padding */
  }
  #header .header-right > div.openedMenu::after {
    display: block;
  }
  #header .header-right > div::after {
    border: 10px solid transparent;
    border-bottom-color: var(--color-main-background);
    bottom: 0;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    right: 15px;
    z-index: 2001;
    display: none;
  }
  #header .header-right > div#settings::after {
    right: 27px;
  }
}

/*# sourceMappingURL=mobile.css.map */