You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
3.5 KiB
178 lines
3.5 KiB
@media only screen and (max-width: $breakpoint-mobile) { |
|
|
|
/* 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(-#{$navigation-width}); |
|
} |
|
.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%; |
|
// 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: $header-height; |
|
left: 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; |
|
left: 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 #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: $breakpoint-mobile !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: 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; |
|
&::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; |
|
} |
|
} |
|
|
|
#notification-container { |
|
max-width: 100%; |
|
width: 100%; |
|
} |
|
}
|
|
|