memories/src/global.scss

105 lines
1.9 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;
}
// Prevent sidebar from becoming too big
aside.app-sidebar {
max-width: 360px !important;
}
// Fill all available space
.fill-block {
width: 100%;
height: 100%;
display: block;
}
// Live photo transitions
:root {
--livephoto-img-transition: opacity 0.4s linear, transform 0.3s ease-in-out;
}
.memories-livephoto {
position: relative;
overflow: hidden;
img,
video {
position: absolute;
padding: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
transition: var(--livephoto-img-transition);
}
video,
&.playing.canplay img {
opacity: 0;
}
img,
&.playing.canplay video {
opacity: 1;
}
&.playing.canplay img {
transform: scale(1.05);
}
}
// Hide scrollbar
.recycler::-webkit-scrollbar {
display: none;
width: 0 !important;
}
.recycler {
scrollbar-width: none;
-ms-overflow-style: none;
}
// Make sure empty content is full width
[role="note"].empty-content {
width: 100%;
}