diff --git a/src/App.vue b/src/App.vue index 906212d..7078023 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,10 @@ id="app" @keyup="keyup" tabindex="-1" - :class="{ night: grimoire.isNight }" + :class="{ + night: grimoire.isNight, + static: grimoire.isStatic + }" :style="{ backgroundImage: grimoire.background ? `url('${grimoire.background}')` @@ -17,8 +20,7 @@ autoplay loop > -
-
+
@@ -203,6 +205,14 @@ ul { align-items: center; align-content: center; justify-content: center; + + // disable all animations + &.static *, + &.static *:after, + &.static *:before { + transition: none !important; + animation: none !important; + } } #version { @@ -340,14 +350,11 @@ video#background { height: 100%; background: url("assets/clouds.png") repeat; background-size: 2000px auto; + animation: move-background 120s linear infinite; opacity: 0.3; } } -#app > .backdrop.animated:after { - animation: move-background 120s linear infinite; -} - @keyframes move-background { from { transform: translate3d(-2000px, 0px, 0px); diff --git a/src/components/Menu.vue b/src/components/Menu.vue index ce4db99..6731d1a 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -82,28 +82,25 @@ /> +
  • + Background image + +
  • Show Custom Images
  • -
  • - Background image - -
  • -
  • - Animated night +
  • + Disable Animations
  • @@ -344,7 +341,7 @@ export default { "toggleMuted", "toggleNight", "toggleNightOrder", - "toggleNightAnimated", + "toggleStatic", "setZoom", "toggleModal" ]) diff --git a/src/store/index.js b/src/store/index.js index 5a411dc..f03a95a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -79,9 +79,9 @@ export default new Vuex.Store({ grimoire: { isNight: false, isNightOrder: true, - isNightAnimated: true, isPublic: true, isMenuOpen: false, + isStatic: false, isMuted: false, isImageOptIn: false, zoom: 0, @@ -145,7 +145,7 @@ export default new Vuex.Store({ toggleMuted: toggle("isMuted"), toggleMenu: toggle("isMenuOpen"), toggleNightOrder: toggle("isNightOrder"), - toggleNightAnimated: toggle("isNightAnimated"), + toggleStatic: toggle("isStatic"), toggleNight: toggle("isNight"), toggleGrimoire: toggle("isPublic"), toggleImageOptIn: toggle("isImageOptIn"), diff --git a/src/store/persistence.js b/src/store/persistence.js index 55c2b78..0bd6188 100644 --- a/src/store/persistence.js +++ b/src/store/persistence.js @@ -11,6 +11,9 @@ module.exports = store => { if (localStorage.getItem("muted")) { store.commit("toggleMuted", true); } + if (localStorage.getItem("static")) { + store.commit("toggleStatic", true); + } if (localStorage.getItem("imageOptIn")) { store.commit("toggleImageOptIn", true); } @@ -91,6 +94,13 @@ module.exports = store => { localStorage.removeItem("muted"); } break; + case "toggleStatic": + if (state.grimoire.isStatic) { + localStorage.setItem("static", 1); + } else { + localStorage.removeItem("static"); + } + break; case "toggleImageOptIn": if (state.grimoire.isImageOptIn) { localStorage.setItem("imageOptIn", 1);