put projector message in the center of the presentation

openslides/projector/static/javascript/projector.js

@@ -15,9 +15,10 @@ function presentation_reload() {
                 $('#content li').css({'font-size': data.bigger + '%'}, 200);
                 $('#content #sidebar').css({'font-size': '16px'}, 0);
                 $('#content').animate({'margin-top': data.up + 'em'}, 200);
-                $('#overlays li').remove();
+
+                $('#overlays div').remove();
                 $.each(data['overlays'], function (index, value){
-                    $('#overlays ul').append('<li id="overlay' + value[0] + '">' + value[1] + '</li>');
+                    $('#overlays').append('<div id="overlay_' + value[0] + '">' + value[1] + '</div>');
                 });
                 setTimeout("presentation_reload()", 500);
             },

openslides/projector/static/styles/projector.css

@@ -61,18 +61,26 @@ body{
     border-bottom: 4px solid red;
 }
 
-#overlays ul li {
+#overlays div {
     font-size: 4em;
     font-weight: bold;
     padding: 0 1em;
     position: fixed;
-    right: 40px;
+
-    top: 0;
     background: #DDD9D9;
     border-bottom-left-radius: 0.75em;
     border-bottom-right-radius: 0.75em;
 }
 
+#overlay_Countdown {
+    right: 40px;
+    top: 0;
+}
+
+#overlay_Message {
+    right: 20%;
+    top: 50%;
+}
 
 /*** CONTENT ***/
 #content {

openslides/projector/templates/base-projector.html

@@ -31,9 +31,8 @@
         </div>
 
         <div id="overlays">
-            <ul>
             {% for overlay in overlays %}
-                <li id="overlay_{{ overlay.0 }}">{{ overlay.1 }}</li>
+                <div id="overlay_{{ overlay.0 }}">{{ overlay.1 }}</div>
             {% endfor %}
             </ul>
         </div>