refactor: split up CSS globals
Signed-off-by: Varun Patil <radialapps@gmail.com>pull/783/head
Varun Patil
parent
4357a722a4
commit
fe4fd9c240
|
|
@ -23,8 +23,7 @@ import type videojsType from 'video.js';
|
|||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
||||
|
||||
// Global CSS
|
||||
import './global.scss';
|
||||
import './native.scss';
|
||||
import './styles/global.scss';
|
||||
|
||||
// Global exposed variables
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<aside id="app-sidebar-vue" class="app-sidebar reduced hide-scrollbar" v-if="reducedOpen">
|
||||
<aside id="app-sidebar-vue" class="app-sidebar reduced" v-if="reducedOpen">
|
||||
<div class="title">
|
||||
<h2>{{ basename }}</h2>
|
||||
|
||||
|
|
@ -213,4 +213,16 @@ export default defineComponent({
|
|||
.vs__dropdown-menu--floating {
|
||||
z-index: 2526;
|
||||
}
|
||||
|
||||
// Make metadata tab scrollbar thin
|
||||
#tab-memories-metadata,
|
||||
.app-sidebar.reduced {
|
||||
scrollbar-width: thin;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
182
src/global.scss
182
src/global.scss
|
|
@ -1,182 +0,0 @@
|
|||
body {
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
margin-right: 0;
|
||||
|
||||
// If no navigation remove both margins
|
||||
&:not(.has-nav) {
|
||||
width: calc(100%);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
.app-navigation-toggle {
|
||||
// Move up to align with back button of top matter
|
||||
top: 2px;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
opacity: 0.2; // It's ugly
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Allow hiding app name (PublicShareHeader)
|
||||
header#header .header-appname {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.hidden {
|
||||
opacity: 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;
|
||||
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
video {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.playing.canplay {
|
||||
video {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.3s ease-in-out, visibility 0s ease-in-out;
|
||||
}
|
||||
img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide scrollbar
|
||||
@mixin hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.hide-scrollbar {
|
||||
@include hide-scrollbar;
|
||||
}
|
||||
.hide-scrollbar-mobile {
|
||||
@media (max-width: 768px) {
|
||||
@include hide-scrollbar;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable user selection
|
||||
.no-user-select {
|
||||
user-select: none;
|
||||
-webkit-user-select: none; // iOS Safari is a horrible browser
|
||||
}
|
||||
|
||||
// Make OC dialogs larger to a minimum width
|
||||
div.oc-dialog[role='dialog'] {
|
||||
min-width: min(400px, 90vw);
|
||||
|
||||
// This close button is annoying since it does
|
||||
// the same thing as the cancel button but needs
|
||||
// two tabs to reach the OK button when visible.
|
||||
button.oc-dialog-close {
|
||||
display: 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
body {
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
margin-right: 0;
|
||||
|
||||
// If no navigation remove both margins
|
||||
&:not(.has-nav) {
|
||||
width: calc(100%);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
.app-navigation-toggle {
|
||||
// Move up to align with back button of top matter
|
||||
top: 2px;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
opacity: 0.2; // It's ugly
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide horizontal scrollbar on mobile
|
||||
// For the padding removal above
|
||||
#app-content-vue {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import 'body.scss';
|
||||
@import 'header.scss';
|
||||
@import 'utils.scss';
|
||||
@import 'livephoto.scss';
|
||||
@import 'patch.scss';
|
||||
@import 'native.scss';
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
// Allow hiding app name (PublicShareHeader)
|
||||
header#header .header-appname {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.hidden {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
// 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;
|
||||
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
video {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.playing.canplay {
|
||||
video {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.3s ease-in-out, visibility 0s ease-in-out;
|
||||
}
|
||||
img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// 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
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Make OC dialogs larger to a minimum width
|
||||
div.oc-dialog[role='dialog'] {
|
||||
min-width: min(400px, 90vw);
|
||||
|
||||
// This close button is annoying since it does
|
||||
// the same thing as the cancel button but needs
|
||||
// two tabs to reach the OK button when visible.
|
||||
button.oc-dialog-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Fill all available space
|
||||
.fill-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide scrollbar
|
||||
@mixin hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.hide-scrollbar {
|
||||
@include hide-scrollbar;
|
||||
}
|
||||
.hide-scrollbar-mobile {
|
||||
@media (max-width: 768px) {
|
||||
@include hide-scrollbar;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable user selection
|
||||
.no-user-select {
|
||||
user-select: none;
|
||||
-webkit-user-select: none; // iOS Safari is a horrible browser
|
||||
}
|
||||
Loading…
Reference in New Issue