replace more occurences of transition durations

15 files changed, 34 insertions, 29 deletions

diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index fb1c74d..86a3dba 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -92,7 +92,7 @@
         justify-content: space-around;
         align-items: center;
 
-        transition: all 0.5s ease-out;
+        transition: all var(--transition-duration-slow) ease-out;
 
         > textarea {
             border: 1px solid var(--content-color-40);
diff --git a/resources/assets/stylesheets/scss/clipboard.scss b/resources/assets/stylesheets/scss/clipboard.scss
index f36386a..1becc2a 100644
--- a/resources/assets/stylesheets/scss/clipboard.scss
+++ b/resources/assets/stylesheets/scss/clipboard.scss
@@ -82,7 +82,7 @@ table.clipboard-area tr.empty-clipboard-message > td {
 
 
 .animated-drop {
-    animation: drop-animation 0.5s;
+    animation: drop-animation var(--transition-duration-slow);
 }
 
 @keyframes drop-animation {
diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss
index 148b6e0..1be7a0e 100644
--- a/resources/assets/stylesheets/scss/contents.scss
+++ b/resources/assets/stylesheets/scss/contents.scss
@@ -60,7 +60,7 @@
             grid-template-columns: 74px auto;
             grid-gap: 5px;
             padding: 25px 10px 10px;
-            transition: 0.5s;
+            transition: var(--transition-duration-slow);
 
             &:hover {
                 text-decoration: none;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
index 5312ac5..39ce446 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
@@ -15,7 +15,7 @@
 
             &.active {
                 display: block;
-                animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+                animation: shake var(--transition-duration-slow) cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
                 transform: translate3d(0, 0, 0);
                 backface-visibility: hidden;
                 perspective: 1000px;
@@ -25,7 +25,7 @@
         .card {
             width: 100%;
             height: 78%;
-            transition: transform 1s;
+            transition: transform var(--transition-duration-superslow);
             transform-style: preserve-3d;
             cursor: pointer;
             position: relative;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss
index d928786..d45c81d 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss
@@ -15,7 +15,7 @@
     margin: 30px auto;
     position: relative;
     padding: 0;
-    transition: all 0.4s ease;
+    transition: all var(--transition-duration) ease;
 
     &:before {
         content:"";
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/companion.scss b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss
index 229f436..81f0f22 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/companion.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss
@@ -27,7 +27,7 @@ $companion-types: (
     box-shadow: 5px 5px var(--color--courseware-border-default);
     padding-left: 120px;
     transform: translateX(100%);
-    transition: transform .5s ease;
+    transition: transform var(--transition-duration-slow) ease;
 
     @each $type, $image in $companion-types {
         &.#{$type} {
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index e88a2c7..870a36b 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -19,7 +19,7 @@
         padding: 0 4px;
         top: 0;
         right: -270px;
-        transition: right 0.6s;
+        transition: right var(--transition-duration-slow);
         &.hd {
             width: 480px;
             right: -480px;
@@ -56,11 +56,11 @@
                     border-radius: 0;
                 }
             }
-    
+
             .cw-block-search {
                 width: inherit;
             }
-    
+
             .cw-toolbar-tool-header {
                 border-bottom: solid thin var(--color--content-box-border);
                 margin-bottom: 8px;
@@ -68,7 +68,7 @@
             }
 
         }
-        
+
         .cw-toolbar-containers {
             position: relative;
             height: 100%;
@@ -79,7 +79,7 @@
                 padding-right: 10px;
             }
         }
-        
+
         .cw-toolbar-clipboard {
             .cw-collapsible {
                 margin-bottom: 4px;
@@ -106,7 +106,7 @@
         padding: 2px 8px 0 8px;
         border: none;
         background-color: var(--color--global-background);
-        color: var(--color--highlight);   
+        color: var(--color--highlight);
         cursor: pointer;
         border-bottom: solid 2px transparent;
 
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 7788e6d..40eceed 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -401,7 +401,7 @@ $cardMaxWidth: 350px;
         height: 100%;
         min-height: 180px;
         display: flex;
-        transition: 0.2s;
+        transition: var(--transition-duration);
 
         &__flag {
             width: 10px;
@@ -477,7 +477,7 @@ $cardMaxWidth: 350px;
 
     .post {
         display: flex;
-        transition: background-color 1s ease;
+        transition: background-color var(--transition-duration-superslow) ease;
 
         &--highlight {
             background-color: var(--content-color-10);
@@ -639,7 +639,7 @@ $cardMaxWidth: 350px;
                 align-items: center;
                 justify-content: center;
                 font-size: 18px;
-                transition: 0.3s;
+                transition: var(--transition-duration);
 
                 &.--active {
                     background-color: var(--base-color-20);
@@ -743,7 +743,7 @@ $cardMaxWidth: 350px;
                     padding: 0;
                     width: 100%;
                     text-align: left;
-                    transition: opacity 5s;
+                    transition: opacity var(--transition-duration-megaslow);
                     cursor: pointer;
                     font-weight: bold;
                     margin: 0 10px;
@@ -824,7 +824,7 @@ $cardMaxWidth: 350px;
                 background-color: var(--color--tile-background);
                 border: 1px solid var(--color--action-menu-border);
                 border-radius: 4px;
-                transition: background-color 1s ease;
+                transition: background-color var(--transition-duration-superslow) ease;
                 z-index: 1;
 
                 &:hover,
@@ -905,7 +905,7 @@ $cardMaxWidth: 350px;
                 align-items: center;
                 justify-content: space-between;
                 gap: 10px;
-                transition: background-color 0.2s ease-out;
+                transition: background-color var(--transition-duration) ease-out;
 
                 &:hover,
                 &:focus {
@@ -922,7 +922,7 @@ $cardMaxWidth: 350px;
                         height: 25px;
                         border-radius: 100%;
                         border: 1.5px solid white;
-                        transition: all .4s ease-in-out;
+                        transition: all var(--transition-duration) ease-in-out;
                     }
 
                     p {
@@ -945,7 +945,7 @@ $cardMaxWidth: 350px;
                 position: absolute;
                 right: 0;
                 top: 10px;
-                transition: background-color 0.2s ease;
+                transition: background-color var(--transition-duration) ease;
 
                 &:hover {
                     background-color: var(--content-color-10);
@@ -1594,7 +1594,7 @@ $cardMaxWidth: 350px;
     */
     .fade-enter-active,
     .fade-leave-active {
-        transition: opacity 0.5s ease;
+        transition: opacity var(--transition-duration-slow) ease;
     }
 
     .fade-enter-from,
@@ -1603,11 +1603,11 @@ $cardMaxWidth: 350px;
     }
 
     .fade-up-enter-active {
-        transition: all 0.2s ease-out;
+        transition: all var(--transition-duration) ease-out;
     }
 
     .fade-up-leave-active {
-        transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+        transition: all var(--transition-duration) cubic-bezier(1, 0.5, 0.8, 1);
     }
 
     .fade-up-enter-from,
diff --git a/resources/assets/stylesheets/scss/root.scss b/resources/assets/stylesheets/scss/root.scss
index 145d417..c51a04b 100644
--- a/resources/assets/stylesheets/scss/root.scss
+++ b/resources/assets/stylesheets/scss/root.scss
@@ -119,6 +119,7 @@
     --transition-duration: #{$transition-duration};
     --transition-duration-slow: #{$transition-duration-slow};
     --transition-duration-superslow: #{$transition-duration-superslow};
+    --transition-duration-megaslow: #{$transition-duration-megaslow};
 
     --color--calendar-today: #{$color--calendar-today};
 
@@ -130,5 +131,6 @@
         --transition-duration: 0s;
         --transition-duration-slow: 0s;
         --transition-duration-superslow: 0s;
+        --transition-duration-megaslow: 0s;
     }
 }
diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss
index 6968b63..66ebafa 100644
--- a/resources/assets/stylesheets/scss/skiplinks.scss
+++ b/resources/assets/stylesheets/scss/skiplinks.scss
@@ -7,7 +7,7 @@
     padding: 10px;
     position: fixed;
     transform: translateX(-50%);
-    transition: opacity 0.5s linear;
+    transition: opacity var(--transition-duration-slow) linear;
     top: 20px;
     z-index: 3000;
 
diff --git a/resources/assets/stylesheets/scss/system-notifications.scss b/resources/assets/stylesheets/scss/system-notifications.scss
index 0606087..a2d0bf6 100644
--- a/resources/assets/stylesheets/scss/system-notifications.scss
+++ b/resources/assets/stylesheets/scss/system-notifications.scss
@@ -118,7 +118,7 @@
     .system-notification-timeout {
         &.system-notification-timeout-enter-active,
         &.system-notification-timeout-leave-active {
-            transition: width 5s linear;
+            transition: width var(--transition-duration-megaslow) linear;
         }
 
         &.system-notification-timeout-enter-from {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 7198e00..fa7b8fe 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -56,6 +56,7 @@ $drag_and_drop_border: 1px solid $base-color;
 $transition-duration: .3s;
 $transition-duration-slow: .5s;
 $transition-duration-superslow: 1s;
+$transition-duration-megaslow: 5s;
 
 // Border radius:
 $border-radius: 4px;
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 33ec53b..4ea21f8 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -977,9 +977,11 @@ html[data--a11y-motion="reduce"] {
     --transition-duration: 0s;
     --transition-duration-slow: 0s;
     --transition-duration-superslow: 0s;
+    --transition-duration-megaslow: 0s;
 }
 html[data--a11y-motion="allow"] {
     --transition-duration: #{$transition-duration};
     --transition-duration-slow: #{$transition-duration-slow};
     --transition-duration-superslow: #{$transition-duration-superslow};
+    --transition-duration-megaslow: #{transition-duration-megaslow};
 }
diff --git a/resources/vue/components/ContentModulesEditTiles.vue b/resources/vue/components/ContentModulesEditTiles.vue
index fc2b2ee..5928a22 100644
--- a/resources/vue/components/ContentModulesEditTiles.vue
+++ b/resources/vue/components/ContentModulesEditTiles.vue
@@ -213,7 +213,7 @@ export default {
     }
     &.pulse:not(.sortable-ghost) {
         box-shadow: 0 0 0 0 rgb(255, 189, 51, 1);
-        animation: pulse 2s;
+        animation: pulse calc(2 * var(--transition-duration-slow));
         animation-iteration-count: 1;
     }
 
diff --git a/resources/vue/components/StudipSwitch.vue b/resources/vue/components/StudipSwitch.vue
index 666f302..6aaca6d 100644
--- a/resources/vue/components/StudipSwitch.vue
+++ b/resources/vue/components/StudipSwitch.vue
@@ -67,7 +67,7 @@ const isChecked = defineModel({ default: false });
     border-radius: var(--studip-switch-size);
     background-color: var(--dark-gray-color-15);
     flex-shrink: 0;
-    transition: background-color 0.25s ease-in-out;
+    transition: background-color var(--transition-duration) ease-in-out;
 }
 
 .switch-container .switch {
@@ -78,7 +78,7 @@ const isChecked = defineModel({ default: false });
     border-radius: 9999px;
     background-color: white;
     border: 2px solid var(--dark-gray-color-15);
-    transition: transform 0.375s ease-in-out;
+    transition: transform var(--transition-duration) ease-in-out;
 }
 
 .switch::before {