Template work for slide components.

client/src/app/shared/components/contdown-time/countdown-time.component.scss

@@ -1,8 +1,6 @@
 #countdown {
     font-weight: bold;
-    padding: 10px;
     display: inline-block;
-    min-width: 75px;
     text-align: right;
 
     &.warning_time {

client/src/app/slides/agenda/common/common-list-of-speakers-slide.component.html

@@ -14,7 +14,8 @@
 
     <!-- Current speaker -->
     <div *ngIf="data.data.current" class="currentSpeaker">
-        <mat-icon>mic</mat-icon> {{ data.data.current.user }}
+        <mat-icon>mic</mat-icon>
+        <span>{{ data.data.current.user }}</span>
     </div>
 
     <!-- Next speakers -->

client/src/app/slides/agenda/common/common-list-of-speakers-slide.component.scss

@@ -1,14 +1,24 @@
 .lastSpeakers {
     color: #9a9898;
-    margin-left: 30px;
+    margin-left: 33px;
+    margin-bottom: 10px;
 }
 
 .currentSpeaker {
     font-weight: bold;
+
+    .mat-icon,
+    span {
+        vertical-align: middle;
+    }
+    span {
+        padding-left: 8px;
+    }
 }
 
 .nextSpeakers {
     margin-left: 13px !important;
+    margin-top: 10px !important;
 
     li {
         line-height: 150%;

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.html

@@ -1,3 +1,27 @@
 <div id="overlay" *ngIf="data">
-    <os-common-list-of-speakers-slide [data]="data"></os-common-list-of-speakers-slide>
+    <h3 translate>List of speakers</h3>
+
+    <!-- Last speakers -->
+    <div *ngIf="data.data.finished && data.data.finished.length">
+        <div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
+            {{ speaker.user }}
+            <mat-icon *ngIf="speaker.marked">star</mat-icon>
+        </div>
+    </div>
+
+    <!-- Current speaker -->
+    <div *ngIf="data.data.current" class="currentSpeaker">
+        <mat-icon>mic</mat-icon>
+        <span>{{ data.data.current.user }}</span>
+    </div>
+
+    <!-- Next speakers -->
+    <div *ngIf="data.data.waiting && data.data.waiting.length">
+        <ol class="nextSpeakers">
+            <li *ngFor="let speaker of data.data.waiting">
+                {{ speaker.user }}
+                <mat-icon *ngIf="speaker.marked">star</mat-icon>
+            </li>
+        </ol>
+    </div>
 </div>

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.scss

@@ -1,9 +1,17 @@
+@import '../common/common-list-of-speakers-slide.component.scss';
+
 #overlay {
     position: absolute;
     right: 0;
     bottom: 0;
-    background-color: green;
-    height: 30px;
+    background-color: #d3d3d3;
+    width: 40%;
+    height: 200px;
     margin: 10px;
-    z-index: 10;
+    z-index: 20;
+    border-radius: 7px;
+    border: 1px solid #999;
+    padding: 0px 7px 10px 19px;
+    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
 }

client/src/app/slides/core/clock/clock-slide.component.scss

@@ -1,21 +1,19 @@
 #clock {
     position: absolute;
-    right: 0;
-    top: 0;
-    color: white;
+    right: 38px;
+    top: 23px;
     height: 30px;
-    margin: 12px;
-    z-index: 2;
-    padding-right: 50px;
-    padding-top: 5px;
+    z-index: 10;
+    padding-left: 30px;
+    text-align: right;
 
     mat-icon {
-        padding-top: 5px;
+        vertical-align: middle;
     }
 
     span {
         padding-left: 5px;
         font-size: 24px;
-        float: right;
+        vertical-align: middle;
     }
 }

client/src/app/slides/core/countdown/countdown-slide.component.scss

@@ -21,10 +21,10 @@
     &.overlay {
         position: relative;
         float: right;
-        margin: 100px 10px 10px 10px;
-        padding: 10px 40px 7px 10px;
-        min-height: 72px;
-        min-width: 180px;
+        margin: 80px 0px 10px 10px;
+        padding: 35px 35px 0px 10px;
+        min-height: 60px;
+        min-width: 230px;
         font-size: 3.7em;
         font-weight: bold;
         text-align: right;
@@ -37,6 +37,7 @@
             font-weight: normal;
             font-size: 18px;
             padding-right: 6px;
+            padding-top: 20px;
         }
     }
 }

client/src/app/slides/core/projector-message/projector-message-slide.component.scss

@@ -3,7 +3,7 @@
     left: 0;
     top: 0;
     background-color: rgba($color: #000000, $alpha: 0.5);
-    z-index: 10;
+    z-index: 100;
     width: 100%;
     height: 100%;
     display: grid;
@@ -17,10 +17,11 @@
         justify-self: center;
         border-radius: 0.2em;
         background: #ffffff;
-        font-size: 2.75em;
-        padding: 0.2em 0;
+        font-size: 2.3em;
+        padding: 0.5em 0.25em;
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
         min-height: 20px;
+        line-height: normal;
 
         ::ng-deep p {
             margin: 0 0 10px;

client/src/app/slides/motions/motion/motion-slide.component.scss

@@ -7,7 +7,7 @@
 #sidebox {
     width: 260px;
     right: 0;
-    margin-top: 50px;
+    margin-top: 95px;
     background: #d3d3d3;
     border-radius: 7px 0 0 7px;
     padding: 3px 7px 10px 10px;