Communication screen - without club tool

core/static/com/slideshow.scss

@@ -0,0 +1,209 @@
+body{
+
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+
+    padding: 0;
+    margin: 0;
+
+}
+
+#slideshow
+{
+
+    position: relative;
+    background-color: lightgrey;
+
+    height: 100%;
+
+    *
+    {
+
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+    }
+
+    &:hover{
+
+        &::before
+        {
+
+            position: absolute;
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            z-index: 10;
+
+            content: "Click to expand";
+
+            color: white;
+            background-color: rgba(black, 0.5);
+
+        }
+
+    }
+
+
+    &.fullscreen
+    {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: none;
+
+        &:before
+        {
+
+            display:none;
+
+        }
+
+        #slides
+        {
+
+            height: 100vh;
+
+        }
+
+    }
+
+    #slides
+    {
+
+        position: relative;
+
+        height: 100%;
+
+        overflow: hidden;
+
+        .slide
+        {
+
+            position: absolute;
+
+            width: 100%;
+            height: 100%;
+
+            display: inline-flex;
+            justify-content: center;
+
+            top: 0px;
+
+            background-color: grey;
+
+            transition: left 1s ease-out;
+
+            img
+            {
+
+                max-width: 100%;
+                max-height: 100%;
+
+            }
+
+        }
+
+        .slide.left
+        {
+
+            left: -100%;
+
+        }
+
+        .slide.center
+        {
+
+            left: 0px;
+
+        }
+
+        .slide.right
+        {
+
+            left: 100%;
+
+            transition: none;
+
+        }
+
+    }
+
+
+    #progress_bullets
+    {
+
+        position: absolute;
+
+        bottom: 10px;
+
+        width: 100%;
+        height: 10px;
+
+        display: flex;
+        justify-content: center;
+
+        margin-bottom: 10px;
+
+        .bullet
+        {
+
+            height: 10px;
+            width: 10px;
+
+            margin-left: 5px;
+            margin-right: 5px;
+
+            border-radius: 50%;
+
+            background-color: grey;
+
+            &.active
+            {
+
+                background-color: #c99836;
+
+            }
+
+        }
+
+
+    }
+
+    #progress_bar
+    {
+
+        position: absolute;
+        bottom: 0px;
+        height: 10px;
+        background-color: #304c83;
+
+        &.init
+        {
+
+            width: 0px;
+            transition: none;
+
+        }
+
+        &.progress
+        {
+
+            width: 100%;
+            transition: width 40s linear;
+
+        }
+
+    }
+
+}
+