memories/src/global.scss

127 lines
2.3 KiB
SCSS

body {
overflow: hidden;
}
// Nextcloud 25+: get rid of gap and border radius at right
#content-vue.remove-gap {
// was var(--body-container-radius)
// now set on #app-navigation-vue
border-radius: 0;
width: calc(100% - var(--body-container-margin) * 1); // was *2
// Reduce size of navigation. NC <25 doesn't like this on mobile.
#app-navigation-vue {
max-width: 250px;
}
}
// Prevent content overflow on NC <25
#content-vue {
max-height: 100vh;
// https://bugs.webkit.org/show_bug.cgi?id=160953
overflow: visible;
#app-navigation-vue {
border-top-left-radius: var(--body-container-radius);
border-bottom-left-radius: var(--body-container-radius);
}
}
// Top bar is above everything else on mobile
body.has-top-bar header {
@media (max-width: 1024px) {
z-index: 0 !important;
}
}
body.has-viewer header {
z-index: 0 !important;
}
// Hide horizontal scrollbar on mobile
// For the padding removal above
#app-content-vue {
overflow-x: hidden;
}
// Fill all available space
.fill-block {
width: 100%;
height: 100%;
display: block;
}
// Make popper menus full height
.v-popper--theme-dropdown .v-popper__inner {
max-height: calc(90vh - 16px) !important; // was 50vh
margin: 0 10px; // was unset
}
// Live Photo transitions
.memories-livephoto {
position: relative;
overflow: hidden;
img,
video {
position: absolute;
padding: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
video {
opacity: 0;
z-index: 2;
transition: opacity 0.3s ease-in-out;
}
img {
transition: transform 0.3s ease-in-out;
}
&.playing.canplay {
video {
opacity: 1;
}
img {
transform: scale(1.05);
}
}
}
// Hide scrollbar
.recycler::-webkit-scrollbar {
display: none;
width: 0 !important;
}
.recycler {
scrollbar-width: none;
-ms-overflow-style: none;
}
// Make metadata tab scrollbar thin
#tab-memories-metadata {
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
// Make sure empty content is full width
[role="note"].empty-content {
width: 100%;
}
// Make NcListItem border-box to prevent overflow
li.list-item__wrapper {
> a.list-item {
box-sizing: border-box;
}
}