Redesign overlays.

openslides/projector/static/javascript/projector.js

@@ -27,7 +27,10 @@ function presentation_reload() {
                 $('#scrollcontent').animate({'margin-top': data.up + 'em'}, 200);
                 // overlays
                 $('#overlays div').remove();
+                $('#overlays span').remove();
                 $.each(data['overlays'], function (index, value){
+                    if (value[0] != "Countdown")
+                        $('#overlays').append('<span id="overlay_transparent"></span>')
                     $('#overlays').append('<div id="overlay_' + value[0] + '">' + value[1] + '</div>');
                 });
                 setTimeout("presentation_reload()", 500);

openslides/projector/static/styles/projector.css

@@ -63,26 +63,40 @@ body{
 #currentTime.ajax_error {
     border-bottom: 4px solid red;
 }
-
+#overlay_transparent {
+    background-color: #777777;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 #overlays div {
-    font-size: 4em;
-    font-weight: bold;
-    padding: 0 1em;
-    position: fixed;
-
-    background: #DDD9D9;
-    border-bottom-left-radius: 0.75em;
-    border-bottom-right-radius: 0.75em;
 }
 
 #overlay_Countdown {
+    position: absolute;
     right: 40px;
     top: 0;
+    font-size: 4em;
+    font-weight: bold;
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+    background: #DDD9D9;
+    padding: 0 1em;
 }
 
 #overlay_Message {
-    right: 20%;
-    top: 50%;
+    position: absolute;
+    top: 25%;
+    left: 10%;
+    width: 80%;
+    text-align: center;
+    border-radius: 0.2em;
+    background: #FFFFFF;
+    font-size: 3.75em;
+    padding: 0.2em 0;
 }
 
 /*** CONTENT ***/

openslides/projector/templates/base-projector.html

@@ -32,9 +32,11 @@
 
         <div id="overlays">
             {% for overlay in overlays %}
-                <div id="overlay_{{ overlay.0 }}">{{ overlay.1 }}</div>
+                {% if overlay.0 != "Countdown" %}
+                    <span id="overlay_transparent"></span>
+                {% endif %}
+                <div id="overlay_{{ overlay.0 }}">{{ overlay.1|safe }}</div>
             {% endfor %}
-            </ul>
         </div>
 
         <div id="contentwrapper">