respect reduced motion

This commit is contained in:
ThatOneCalculator 2022-11-29 18:13:08 -08:00
parent 95ce4151e4
commit 269462bfc6
4 changed files with 19 additions and 3 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.17.9", "version": "12.119.0-calc.18",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

View file

@ -42,7 +42,7 @@ html {
width: 28px; width: 28px;
height: 28px; height: 28px;
transform: translateY(110px); transform: translateY(110px);
display: none !important; display: none;
color: var(--accent); color: var(--accent);
} }
#splashSpinner > .spinner { #splashSpinner > .spinner {
@ -101,6 +101,16 @@ html {
} }
} }
@media(prefers-reduced-motion) {
#splashSpinner {
display: block;
}
#splashIcon {
animation: none;
}
}
#splashText { #splashText {
position: absolute; position: absolute;
top: 0; top: 0;

View file

@ -156,6 +156,12 @@ const props = withDefaults(defineProps<{
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); } 0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); } 100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
} }
@media(prefers-reduced-motion) {
div[class^='mfm'], div[class*=' mfm'] {
animation: none;
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -11,7 +11,7 @@
<XStreamIndicator/> <XStreamIndicator/>
<div v-if="pendingApiRequestsCount > 0" id="wait"></div> <!-- <div v-if="pendingApiRequestsCount > 0" id="wait"></div> -->
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div> <div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
</template> </template>