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);