diff options
Diffstat (limited to 'core/css/mobile.css')
| -rw-r--r-- | core/css/mobile.css | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/core/css/mobile.css b/core/css/mobile.css new file mode 100644 index 00000000000..0cc41788b7a --- /dev/null +++ b/core/css/mobile.css @@ -0,0 +1,198 @@ +@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 (max-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 { + transform: translateX(-300px); + } + + .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 #controls { + padding-left: 44px; + } + + /* .viewer-mode is when text editor, PDF viewer, etc is open */ + #body-user .app-files.viewer-mode #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 #controls { + min-width: 1024px !important; + } + + /* do not show dates in filepicker */ + #oc-dialog-filepicker-content .filelist #headerSize, +#oc-dialog-filepicker-content .filelist #headerDate, +#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; + } + + #notification-container { + max-width: 100%; + width: 100%; + } +} + +/*# sourceMappingURL=mobile.css.map */ |