Aprilscherz

django/server/static/server/css/_cipmap.scss

@@ -20,6 +20,12 @@ $transition-time: .5s;
   transition-delay: $options;
 }
 
+/* HTML */
+
+html {
+  font-family: "Comic Sans MS", "Comic Sans", "Times New Roman", cursive;
+}
+
 
 /* Body */
 
@@ -230,6 +236,7 @@ footer .footer-copyright.row {
   position: absolute;
   border: solid 0px #dcdcdc;
   margin: 0px;
+  border-radius: 50%;
 }
 
 %kiste-border {
@@ -242,24 +249,28 @@ footer .footer-copyright.row {
 
 .free {
   @extend %kiste-border;
+  @extend %rotating;
   background-color: color('light-green', 'lighten-2');
   border-color: color('light-green', 'darken-1');
 }
 
 .occupied {
   @extend %kiste-border;
+  @extend %rotating-rainbow;
   background-color: color('red', 'lighten-3');
   border-color: color('deep-orange', 'accent-4');
 }
 
 .idle {
   @extend %kiste-border;
+  @extend %rotating;
   background-color: color('yellow', 'lighten-3');
   border-color: color('amber', 'lighten-1');
 }
 
 .off {
   @extend %kiste-border;
+  @extend %rotating;
   background-color: color('grey', 'lighten-2');
   border-color: color('brown', 'lighten-3');
 }
@@ -279,6 +290,7 @@ footer .footer-copyright.row {
 
 .nextTutorRequest {
   @extend .pulse;
+  @extend %rotating-rainbow-fast;
   z-index: 5;
 }
 
@@ -379,3 +391,85 @@ table.privacyoverview td:first-child {
   unicode-bidi: bidi-override;
   direction: rtl;
 }
+
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+%rotating {
+  -webkit-animation: rotating 2s linear infinite !important;
+  -moz-animation:    rotating 2s linear infinite !important;
+  -ms-animation:     rotating 2s linear infinite !important;
+  -o-animation:      rotating 2s linear infinite !important;
+  animation:         rotating 2s linear infinite !important;
+}
+
+@-moz-keyframes rainbow /* Firefox */ {
+    0% {background: color('red', 'base');}
+    17% {background: color('orange', 'base');}
+    33% {background: color('yellow', 'base');}
+    50% {background: color('light-green', 'base');}
+    67% {background: color('cyan', 'base');}
+    83% {background: color('blue', 'base');}
+    100% {background: color('purple', 'base');}
+}
+
+@-webkit-keyframes rainbow /* Safari and Chrome */ {
+    0% {background: color('red', 'base');}
+    17% {background: color('orange', 'base');}
+    33% {background: color('yellow', 'base');}
+    50% {background: color('light-green', 'base');}
+    67% {background: color('cyan', 'base');}
+    83% {background: color('blue', 'base');}
+    100% {background: color('purple', 'base');}
+}
+
+%rainbow {
+  -webkit-animation: rainbow 5s linear infinite;
+  -moz-animation: rainbow 5s linear infinite;
+  -ms-animation: rainbow 5s linear infinite;
+  -o-animation: rainbow 5s linear infinite;
+  animation: rainbow 5s linear infinite;
+}
+
+%rotating-rainbow {
+  -webkit-animation: rotating 2s linear infinite, rainbow 5s linear infinite;
+  -moz-animation: rotating 2s linear infinite, rainbow 5s linear infinite;
+  -ms-animation: rotating 2s linear infinite, rainbow 5s linear infinite;
+  -o-animation: rotating 2s linear infinite, rainbow 5s linear infinite;
+  animation: rotating 2s linear infinite, rainbow 5s linear infinite;
+}
+
+%rotating-rainbow-fast {
+  -webkit-animation: rotating 0.2s linear infinite, rainbow 1s linear infinite;
+  -moz-animation:    rotating 0.2s linear infinite, rainbow 1s linear infinite;
+  -ms-animation:     rotating 0.2s linear infinite, rainbow 1s linear infinite;
+  -o-animation:      rotating 0.2s linear infinite, rainbow 1s linear infinite;
+  animation:         rotating 0.2s linear infinite, rainbow 1s linear infinite;
+}