server/core/css/mobile.scss
Daniel Calviño Sánchez 26db9540d4 Remove SCSS rules for "#body-login" elements
"#body-login" is only used in the layout for guest pages. Therefore,
before SCSS was enabled for guest pages, all "#body-login" rules in SCSS
files were ignored. Now that SCSS is enabled for guest pages those rules
break the guest pages, but given that they were ignored until now they
can be safely removed.

Note, however, that all of the above refers to regular SCSS rules; those
defined in the Theming app are different, as they were converted to CSS
and used in the guest pages even when SCSS was disabled, so they do not
need to be adjusted due to SCSS being enabled now.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2018-07-13 03:11:47 +02:00

158 lines
2.9 KiB
SCSS

@media only screen and (max-width: 768px) {
/* do not show update notification on mobile */
#update-notification {
display: none !important;
}
/* 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,
#app-content {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#app-navigation {
width: 250px !important;
}
#app-content {
width: 100% !important;
left: 0 !important;
background-color: var(--color-main-background);
overflow-x: hidden !important;
z-index: 1000;
}
/* allow horizontal scrollbar in settings
otherwise user management is not usable on mobile */
#body-settings #app-content {
overflow-x: auto !important;
}
#app-navigation-toggle {
position: fixed;
display: inline-block !important;
top: 50px;
left: 0;
width: 44px;
height: 44px;
z-index: 149;
background-color: var(--color-main-background-darker);
cursor: pointer;
opacity: .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: 768px !important;
}
/* do not show dates in filepicker */
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
display: none;
}
#oc-dialog-filepicker-content .filelist .filename {
max-width: 80%;
}
/* fix controls bar jumping when navigation is slid out */
.snapjs-left #app-navigation-toggle,
.snapjs-left #controls {
top: 0;
}
.snapjs-left table.multiselect thead {
top: 44px;
}
/* end of media query */
}
@media only screen and (max-width: 480px) {
#header .header-right .menu {
max-width: calc(100vw - 10px);
position: fixed;
&::after {
display: none !important;
}
}
/* Arrow directly child of menutoggle */
#header .header-right > 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;
right: 15px;
z-index: 2001;
display: none;
}
/* settings need a different offset, since they have a right padding */
&#settings::after {
right: 27px;
}
}
}