improved server-whisper, user join/leave messages, layout/UI overhaul

www/css/cytube.css

@@ -36,6 +36,13 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+body{
+    max-width: 100%;
+    overflow-x: hidden;
+}
+#main, #titles{ 
+	display: flex;
+}
 
 .container-fluid {
     padding-left: 15px;
@@ -44,6 +51,15 @@ SOFTWARE.
     margin-right: auto;
 }
 
+#minicontrol{
+	display: none;
+	margin: 0 0.5em 0 0.5em;
+}
+#vidplay{
+}
+#viddur{
+	margin-right:0.5em;
+}
 #loginform > .form-group {
     margin-right: 5px;
 }
@@ -60,7 +76,7 @@ SOFTWARE.
     margin-top: 10px;
 }
 
-#messagebuffer {
+#messagebuffer{
     width: auto;
     padding-left: 5px;
     padding-right: 5px;
@@ -142,6 +158,14 @@ SOFTWARE.
     margin: 0;
 }
 
+#videowrap, #videowrap-header{
+	flex: 0 0 50%;
+}
+
+#chatwrap, #chatheader{ 
+	flex: 1 1;
+}
+
 .pointer {
     cursor: pointer;
 }
@@ -385,7 +409,6 @@ label[for="emotealphabox"]{
 }
 
 #chatheader .label {
-    height: 100%;
     margin-left: 2px;
 }
 

www/css/sticky-footer-navbar.css

@@ -6,12 +6,8 @@ body {
 
 /* Wrapper for page content to push down footer */
 #wrap {
-  min-height: 100%;
+  min-height: calc(100vh - 60px);
   height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
 
 /* Set the fixed height of the footer here */

www/css/themes/fore.st.css

@@ -82,6 +82,8 @@ mark{
     background:#ff0;
     color:#000
 }
+#minicontrol{
+}
 sub,sup{
     font-size:75%;
     line-height:0;
@@ -1221,27 +1223,6 @@ pre code{
     max-height:340px;
     overflow-y:scroll
 }
-.container,.container-fluid{
-    margin-right:auto;
-    margin-left:auto;
-    padding-left:0px;
-    padding-right:0px
-}
-@media (min-width:768px){
-    .container{
-        width:750px
-    }
-}
-@media (min-width:992px){
-    .container{
-        width:970px
-    }
-}
-@media (min-width:1200px){
-    .container{
-        width:1170px
-    }
-}
 .row{
     margin-left:0px;
     margin-right:0px
@@ -4490,6 +4471,10 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
     padding:0;
     overflow:hidden;
     border: 1px solid #949494;
+    border-bottom: 0px;
+}
+#main{
+    border-bottom: 1px solid #949494;
 }
 .embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{
     position:absolute;
@@ -4501,10 +4486,8 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
     border:0
 }
 .embed-responsive.embed-responsive-16by9{
-    padding-bottom:56.25%
 }
 .embed-responsive.embed-responsive-4by3{
-    padding-bottom:75%
 }
 .well{
     min-height:20px;
@@ -5509,7 +5492,7 @@ a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover{
     text-decoration: none;
 }
 
-#emotelistbtm, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
+#pollopenbtn, #prefopenbtn, #emoteopenbtn, #chatsend, #motdwrap, #chatline, #rightcontrols, #chatheader, #userlist, #messagebuffer, #videowrap-header, .embed-responsive, #rightpane, #mainrow{
      background-color: #111111C0;
      backdrop-filter: blur(12px);
 }