new version

src/client/sass/index.scss

@@ -0,0 +1,192 @@
+@import "../../../node_modules/foundation-sites/scss/foundation";
+
+//Settings nach foundation für mixins in settings
+@import "wordRotator";
+@import "animations";
+
+//Include foundation before other styles, so that other one can override foundation
+@include foundation-everything;
+
+//From framework
+@import "../../../node_modules/cordova-sites/cordova-sites";
+@import "../../../node_modules/cordova-sites-user-management/cordova-sites-user-management";
+
+//Anderes nach Settings, damit Settings bereits angewendet werden
+
+.translation{}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes line {
+  0% {
+    stroke-dasharray: 2, 85.964;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dasharray: 65.973, 21.9911;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 2, 85.964;
+    stroke-dashoffset: -65.973;
+    transform: rotate(90deg);
+  }
+}
+
+html, body {
+  min-height: 100%;
+  width: 100%;
+  height: 100%;
+  letter-spacing: 1px;
+  overscroll-behavior: none;
+}
+
+
+a, a:hover {
+  color: #ffca00;
+}
+
+#site {
+  position: relative;
+  max-height: 100%;
+  max-width: 100%;
+  //overflow: auto;
+  height: 100%;
+  width: 100%;
+  //display: inline-block;
+}
+
+.right {
+  float: right
+}
+
+.grow {
+  flex: 1;
+}
+
+.loader {
+  left: 50%;
+  top: 50%;
+  position: fixed;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+
+  &.overlay {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(192, 192, 192, 0.5);
+    transform: none;
+    z-index: 10000;
+
+    svg {
+      left: 50%;
+      top: 50%;
+      position: fixed;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      text-align: center;
+    }
+  }
+
+  &.inline {
+    left: initial;
+    top: initial;
+    position: initial;
+    -webkit-transform: initial;
+    transform: initial;
+    text-align: center;
+    display: inline;
+  }
+
+  &.small .spinner {
+    transform: scale(0.5);
+  }
+
+  .spinner {
+    box-sizing: border-box;
+    //stroke: #b71c1a;
+    stroke: #000;
+    stroke-width: 3px;
+    transform-origin: 50%;
+    animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
+  }
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-hidden{
+  overflow: hidden;
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+//ViewInflater
+.injected-span {
+}
+
+.vertical-middle {
+  display: flex;
+  align-items: center;
+}
+
+.vertical-bottom {
+  display: flex;
+  align-items: end;
+}
+
+.horizontal-center {
+  display: flex;
+  justify-content: center;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+@for $i from 1 through 6 {
+  h#{$i}.inline {
+    display: inline-block;
+  }
+}
+
+img.back-button {
+  cursor: pointer;
+  max-height: 1.1rem;
+  margin-right: 0.2rem;
+  margin-bottom: 0.65rem;
+}
+
+a.hidden-link {
+  color: inherit;
+}
+
+#main-content-container {
+  overflow: auto;
+  width: 100%;
+
+  #main-content {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+body{
+  //background-image: url("../img/background.png");
+}