Make more semantic by putting login/register column info in css

css/converse.css

@@ -4426,6 +4426,28 @@
 body.reset {
   margin: 0; }
 
+@font-face {
+  font-family: 'Converse-js';
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+.icon-conversejs {
+  padding-right: 0.2em;
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-conversejs:before {
+  content: "\e600"; }
+
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
@@ -5466,10 +5488,13 @@ body.reset {
       padding-bottom: 0.5em; }
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
-  #conversejs #controlbox .brand-heading-container .brand-heading {
-    text-align: center; }
-  #conversejs #controlbox .brand-heading-container .brand-name {
-    font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container {
+    flex: 0 0 100%;
+    max-width: 100%; }
+    #conversejs #controlbox .brand-heading-container .brand-heading {
+      text-align: center; }
+    #conversejs #controlbox .brand-heading-container .brand-name {
+      font-size: 120%; }
   #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
     #conversejs #controlbox #converse-login-panel .brand-heading {
@@ -5675,6 +5700,9 @@ body.reset {
     display: block; } }
 #conversejs:not(.fullscreen) #controlbox {
   order: -1; }
+  #conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
+    flex: 0 0 100%;
+    max-width: 100%; }
   #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
     font-size: 90%; }
   #conversejs:not(.fullscreen) #controlbox .controlbox-panes {

css/inverse.css

@@ -4426,6 +4426,28 @@
 body.reset {
   margin: 0; }
 
+@font-face {
+  font-family: 'Converse-js';
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+.icon-conversejs {
+  padding-right: 0.2em;
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-conversejs:before {
+  content: "\e600"; }
+
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
@@ -5533,10 +5555,13 @@ body {
       padding-bottom: 0.5em; }
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
-  #conversejs #controlbox .brand-heading-container .brand-heading {
-    text-align: center; }
-  #conversejs #controlbox .brand-heading-container .brand-name {
-    font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container {
+    flex: 0 0 100%;
+    max-width: 100%; }
+    #conversejs #controlbox .brand-heading-container .brand-heading {
+      text-align: center; }
+    #conversejs #controlbox .brand-heading-container .brand-name {
+      font-size: 120%; }
   #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
     #conversejs #controlbox #converse-login-panel .brand-heading {
@@ -5749,7 +5774,6 @@ body {
   #conversejs.fullscreen #controlbox #converse-login-panel {
     border-radius: 0; }
     #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
-      margin: 0;
       padding: 3em 2em 3em; }
   #conversejs.fullscreen #controlbox .toggle-register-login {
     line-height: 26px; }
@@ -5792,12 +5816,36 @@ body {
     background-color: #578EA9; }
     #conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
       display: none; }
-  #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
-    margin: 1em 0; }
-  #conversejs.fullscreen #controlbox #converse-register input[type=submit],
-  #conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
-  #conversejs.fullscreen #controlbox #converse-login input[type=button] {
-    width: auto; }
+  #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+    margin-left: 16.6666666667%; }
+    @media (min-width: 576px) {
+      #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+        margin-left: 16.6666666667%; } }
+    @media (min-width: 768px) {
+      #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+        margin-left: 16.6666666667%; } }
+    @media (min-width: 992px) {
+      #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
+        flex: 0 0 50%;
+        max-width: 50%;
+        margin-left: 25%; } }
+    #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
+      margin: 1em 0; }
+    #conversejs.fullscreen #controlbox #converse-register input[type=submit],
+    #conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
+    #conversejs.fullscreen #controlbox #converse-login input[type=button] {
+      width: auto; }
 
 #conversejs #converse-roster {
   text-align: left;

dev.html

@@ -17,7 +17,7 @@
     <script src="src/config.js"></script>
 </head>
 
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+<body id="page-top" class="reset" data-target=".navbar-custom">
     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
         <div class="container">
             <div class="navbar-header page-scroll">

fonticons/Read Me.txt

@@ -1,7 +0,0 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

fonticons/demo-files/demo.css

@@ -1,155 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 32px;
-}
-.fs2 {
-  font-size: 32px;
-}
-

fonticons/demo-files/demo.js

@@ -1,30 +0,0 @@
-if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
-    }
-});
-
-(function() {
-    var fontSize = document.getElementById('fontSize'),
-        testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
-    function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
-        if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
-        }
-    }
-    function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
-    }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());

fonticons/demo.html

@@ -1,1257 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>IcoMoon Demo</title>
-    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="demo-files/demo.css">
-    <link rel="stylesheet" href="style.css"></head>
-<body>
-    <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;76)</small></h1>
-    </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-save">
-                
-                </span>
-                <span class="mls"> icon-save</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0c7" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0c7;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-idcard-dark">
-                
-                </span>
-                <span class="mls"> icon-idcard-dark</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f2c2" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf2c2;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-idcard">
-                
-                </span>
-                <span class="mls"> icon-idcard</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f2c3" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf2c3;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-snowflake">
-                
-                </span>
-                <span class="mls"> icon-snowflake</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f2dc" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf2dc;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-globe">
-                
-                </span>
-                <span class="mls"> icon-globe</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0ac" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0ac;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-legal">
-                
-                </span>
-                <span class="mls"> icon-legal</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0e3" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0e3;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-group">
-                
-                </span>
-                <span class="mls"> icon-group</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0c0" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0c0;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-database">
-                
-                </span>
-                <span class="mls"> icon-database</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f1c0" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf1c0;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-envelope">
-                
-                </span>
-                <span class="mls"> icon-envelope</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f003" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf003;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-heart2">
-                
-                </span>
-                <span class="mls"> icon-heart2</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f004" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf004;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-star">
-                
-                </span>
-                <span class="mls"> icon-star</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f005" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf005;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-star_empty">
-                
-                </span>
-                <span class="mls"> icon-star_empty</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f006" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf006;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-heart_empty">
-                
-                </span>
-                <span class="mls"> icon-heart_empty</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f08a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf08a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-    </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-xa">
-                
-                </span>
-                <span class="mls"> icon-xa</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e602" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe602;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-conversejs">
-                
-                </span>
-                <span class="mls"> icon-conversejs</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e600" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe600;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-closed">
-                
-                </span>
-                <span class="mls"> icon-closed</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="25ba" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x25ba;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-opened">
-                
-                </span>
-                <span class="mls"> icon-opened</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="25bc" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x25bc;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-checkmark">
-                
-                </span>
-                <span class="mls"> icon-checkmark</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2713" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2713;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-home">
-                
-                </span>
-                <span class="mls"> icon-home</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e000" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe000;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-pencil">
-                
-                </span>
-                <span class="mls"> icon-pencil</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="270e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x270e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-music">
-                
-                </span>
-                <span class="mls"> icon-music</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="266b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x266b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-phone">
-                
-                </span>
-                <span class="mls"> icon-phone</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="260f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x260f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-phone-hang-up">
-                
-                </span>
-                <span class="mls"> icon-phone-hang-up</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="260e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x260e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-address-book">
-                
-                </span>
-                <span class="mls"> icon-address-book</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="270f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x270f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-notebook">
-                
-                </span>
-                <span class="mls"> icon-notebook</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2710" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2710;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-pushpin">
-                
-                </span>
-                <span class="mls"> icon-pushpin</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e012" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe012;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-online">
-                
-                </span>
-                <span class="mls"> icon-online</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="25fc" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x25fc;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-away">
-                
-                </span>
-                <span class="mls"> icon-away</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="25fb" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x25fb;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-bubbles">
-                
-                </span>
-                <span class="mls"> icon-bubbles</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e015" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe015;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-bubbles2">
-                
-                </span>
-                <span class="mls"> icon-bubbles2</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e016" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe016;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-bubbles3">
-                
-                </span>
-                <span class="mls"> icon-bubbles3</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e017" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe017;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-user">
-                
-                </span>
-                <span class="mls"> icon-user</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-hide-users">
-                
-                </span>
-                <span class="mls"> icon-hide-users</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01c" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01c;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-show-users">
-                
-                </span>
-                <span class="mls"> icon-show-users</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-users">
-                
-                </span>
-                <span class="mls"> icon-users</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-quotes-left">
-                
-                </span>
-                <span class="mls"> icon-quotes-left</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-spinner">
-                
-                </span>
-                <span class="mls"> icon-spinner</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="231b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x231b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-search">
-                
-                </span>
-                <span class="mls"> icon-search</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e021" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe021;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cogs">
-                
-                </span>
-                <span class="mls"> icon-cogs</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e022" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe022;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-wrench">
-                
-                </span>
-                <span class="mls"> icon-wrench</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e024" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe024;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-unlocked">
-                
-                </span>
-                <span class="mls"> icon-unlocked</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e025" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe025;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-lock-2">
-                
-                </span>
-                <span class="mls"> icon-lock-2</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e027" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe027;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-key">
-                
-                </span>
-                <span class="mls"> icon-key</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e028" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe028;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-zoomout">
-                
-                </span>
-                <span class="mls"> icon-zoomout</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e02a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe02a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-zoomin">
-                
-                </span>
-                <span class="mls"> icon-zoomin</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e02b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe02b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cog">
-                
-                </span>
-                <span class="mls"> icon-cog</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e02f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe02f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-remove">
-                
-                </span>
-                <span class="mls"> icon-remove</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e02d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe02d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-eye">
-                
-                </span>
-                <span class="mls"> icon-eye</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e030" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe030;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-eye-blocked">
-                
-                </span>
-                <span class="mls"> icon-eye-blocked</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e031" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe031;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-attachment">
-                
-                </span>
-                <span class="mls"> icon-attachment</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e032" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe032;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-heart">
-                
-                </span>
-                <span class="mls"> icon-heart</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2764" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2764;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-happy">
-                
-                </span>
-                <span class="mls"> icon-happy</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="263b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x263b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-smiley">
-                
-                </span>
-                <span class="mls"> icon-smiley</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="263a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x263a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-info">
-                
-                </span>
-                <span class="mls"> icon-info</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2360" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2360;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-notification">
-                
-                </span>
-                <span class="mls"> icon-notification</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e01f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe01f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-warning">
-                
-                </span>
-                <span class="mls"> icon-warning</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="26a0" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x26a0;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-spell-check">
-                
-                </span>
-                <span class="mls"> icon-spell-check</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e045" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe045;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-bold">
-                
-                </span>
-                <span class="mls"> icon-bold</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e04d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe04d;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-underline">
-                
-                </span>
-                <span class="mls"> icon-underline</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e04e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe04e;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-italic">
-                
-                </span>
-                <span class="mls"> icon-italic</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e04f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe04f;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-strikethrough">
-                
-                </span>
-                <span class="mls"> icon-strikethrough</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e050" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe050;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-newtab">
-                
-                </span>
-                <span class="mls"> icon-newtab</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e053" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe053;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-close">
-                
-                </span>
-                <span class="mls"> icon-close</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2715" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2715;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-blocked">
-                
-                </span>
-                <span class="mls"> icon-blocked</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2718" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2718;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cancel-circle">
-                
-                </span>
-                <span class="mls"> icon-cancel-circle</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e058" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe058;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-minus">
-                
-                </span>
-                <span class="mls"> icon-minus</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e05a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe05a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-plus">
-                
-                </span>
-                <span class="mls"> icon-plus</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="271a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x271a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-room-info">
-                
-                </span>
-                <span class="mls"> icon-room-info</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e059" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe059;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-image">
-                
-                </span>
-                <span class="mls"> icon-image</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="2b14" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x2b14;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-offline">
-                
-                </span>
-                <span class="mls"> icon-offline</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e002" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe002;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-busy">
-                
-                </span>
-                <span class="mls"> icon-busy</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e004" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe004;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-exit">
-                
-                </span>
-                <span class="mls"> icon-exit</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e601" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe601;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-google2">
-                
-                </span>
-                <span class="mls"> icon-google2</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="ea89" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xea89;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="google2, brand3" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-twitter">
-                
-                </span>
-                <span class="mls"> icon-twitter</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="ea96" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xea96;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="twitter, brand16" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-github">
-                
-                </span>
-                <span class="mls"> icon-github</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="eab0" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xeab0;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="github, brand40" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-reddit">
-                
-                </span>
-                <span class="mls"> icon-reddit</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="eac6" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xeac6;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-false">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="reddit, brand61" class="liga unitRight" />
-            </div>
-        </div>
-    </div>
-
-    <!--[if gt IE 8]><!-->
-    <div class="mhl clearfix mbl">
-        <h1>Font Test Drive</h1>
-        <label>
-            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
-            min="8" value="48" />
-            px
-        </label>
-        <input id="testText" type="text" class="phl size1of1 mvl"
-        placeholder="Type some text to test..." value="google2 brand3 twitter brand16 github brand40 reddit brand61"/>
-        <div id="testDrive" class="icon-">google2 brand3 twitter brand16 github brand40 reddit brand61&nbsp;
-        </div>
-    </div>
-    <!--<![endif]-->
-    <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
-    </div>
-    <script src="liga.js"></script>
-    <script src="demo-files/demo.js"></script>
-</body>
-</html>

fonticons/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?hbusyn');
-  src:  url('fonts/icomoon.eot?hbusyn#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?hbusyn') format('truetype'),
-    url('fonts/icomoon.woff?hbusyn') format('woff'),
-    url('fonts/icomoon.svg?hbusyn#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?x0id2b');
+  src:  url('fonts/icomoon.eot?x0id2b#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?x0id2b') format('truetype'),
+    url('fonts/icomoon.woff?x0id2b') format('woff'),
+    url('fonts/icomoon.svg?x0id2b#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -18,95 +18,12 @@
   font-variant: normal;
   text-transform: none;
   line-height: 1;
-  
-  /* Enable Ligatures ================ */
-  letter-spacing: 0;
-  -webkit-font-feature-settings: "liga";
-  -moz-font-feature-settings: "liga=1";
-  -moz-font-feature-settings: "liga";
-  -ms-font-feature-settings: "liga" 1;
-  font-feature-settings: "liga";
-  -webkit-font-variant-ligatures: discretionary-ligatures;
-  font-variant-ligatures: discretionary-ligatures;
 
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-address-book:before 	{ content: "\270f"; }
-.icon-attachment:before 	{ content: "\e032"; }
-.icon-away:before 		    { content: "\25fb"; }
-.icon-blocked:before 		{ content: "\2718"; }
-.icon-bold:before 		    { content: "\e04d"; }
-.icon-bubbles2:before 		{ content: "\e016"; }
-.icon-bubbles3:before 		{ content: "\e017"; }
-.icon-bubbles:before 		{ content: "\e015"; }
-.icon-busy:before 		    { content: "\e004"; }
-.icon-cancel-circle:before 	{ content: "\e058"; }
-.icon-checkmark:before 		{ content: "\2713"; }
-.icon-close:before 		    { content: "\2715"; }
-.icon-closed:before 		{ content: "\25ba"; }
-.icon-cog:before 		    { content: "\e02f"; }
-.icon-cogs:before 		    { content: "\e022"; }
-.icon-conversejs:before 	{ content: "\e600"; }
-.icon-database:before 		{ content: "\f1c0"; }
-.icon-envelope:before 		{ content: "\f003"; }
-.icon-exit:before 		    { content: "\e601"; }
-.icon-eye-blocked:before 	{ content: "\e031"; }
-.icon-eye:before 		    { content: "\e030"; }
-.icon-github:before 		{ content: "\eab0"; }
-.icon-globe:before 		    { content: "\f0ac"; }
-.icon-google2:before 		{ content: "\ea89"; }
-.icon-group:before 		    { content: "\f0c0"; }
-.icon-happy:before 		    { content: "\263b"; }
-.icon-heart2:before 		{ content: "\f004"; }
-.icon-heart:before 		    { content: "\2764"; }
-.icon-heart_empty:before 	{ content: "\f08a"; }
-.icon-hide-users:before 	{ content: "\e01c"; }
-.icon-home:before 		    { content: "\e000"; }
-.icon-idcard-dark:before 	{ content: "\f2c2"; }
-.icon-idcard:before 		{ content: "\f2c3"; }
-.icon-image:before 		    { content: "\2b14"; }
-.icon-info:before 		    { content: "\2360"; }
-.icon-italic:before 		{ content: "\e04f"; }
-.icon-key:before 		    { content: "\e028"; }
-.icon-legal:before 		    { content: "\f0e3"; }
-.icon-lock-2:before 		{ content: "\e027"; }
-.icon-minus:before 		    { content: "\e05a"; }
-.icon-music:before 		    { content: "\266b"; }
-.icon-newtab:before 		{ content: "\e053"; }
-.icon-notebook:before 		{ content: "\2710"; }
-.icon-notification:before 	{ content: "\e01f"; }
-.icon-offline:before 		{ content: "\e002"; }
-.icon-online:before 		{ content: "\25fc"; }
-.icon-opened:before 		{ content: "\25bc"; }
-.icon-pencil:before 		{ content: "\270e"; }
-.icon-phone-hang-up:before 	{ content: "\260e"; }
-.icon-phone:before 		    { content: "\260f"; }
-.icon-plus:before 		    { content: "\271a"; }
-.icon-pushpin:before 		{ content: "\e012"; }
-.icon-quotes-left:before 	{ content: "\e01d"; }
-.icon-reddit:before 		{ content: "\eac6"; }
-.icon-remove:before 		{ content: "\e02d"; }
-.icon-room-info:before 		{ content: "\e059"; }
-.icon-save:before 		    { content: "\f0c7"; }
-.icon-search:before 		{ content: "\e021"; }
-.icon-show-users:before 	{ content: "\e01e"; }
-.icon-smiley:before 		{ content: "\263a"; }
-.icon-snowflake:before 		{ content: "\f2dc"; }
-.icon-spell-check:before 	{ content: "\e045"; }
-.icon-spinner:before 		{ content: "\231b"; }
-.icon-star:before 		    { content: "\f005"; }
-.icon-star_empty:before 	{ content: "\f006"; }
-.icon-strikethrough:before 	{ content: "\e050"; }
-.icon-twitter:before 		{ content: "\ea96"; }
-.icon-underline:before 		{ content: "\e04e"; }
-.icon-unlocked:before 		{ content: "\e025"; }
-.icon-user:before 		    { content: "\e01a"; }
-.icon-users:before 		    { content: "\e01b"; }
-.icon-warning:before 		{ content: "\26a0"; }
-.icon-wrench:before 		{ content: "\e024"; }
-.icon-xa:before 		    { content: "\e602"; }
-.icon-zoomin:before 		{ content: "\e02b"; }
-.icon-zoomout:before 		{ content: "\e02a"; }
+.icon-conversejs:before {
+  content: "\e600";
+}

mockup/fullscreen-login.html

@@ -11,7 +11,7 @@
 
 <body>
     <div class="container converse-bg">
-        <h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
+        <h1 class="brand-heading">inVerse</h1>
     </div>
 
     <div id="conversejs" class="fullscreen">
@@ -20,7 +20,7 @@
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="row">
-                            <div class="brand-heading-container col-12">
+                            <div class="brand-heading-container">
                                 <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
                                 <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
                                 <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
@@ -28,25 +28,23 @@
                         </div>
 
                         <div id="converse-login-panel" class="controlbox-pane fade-in row">
-                            <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-                                <form id="converse-login" class="converse-form" method="post">
-                                    <div class="form-group">
-                                        <label for="jid">XMPP Username:</label>
-                                        <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                            <form id="converse-login" class="converse-form" method="post">
+                                <div class="form-group">
+                                    <label for="jid">XMPP Username:</label>
+                                    <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                </div>
+                                <div class="form-group">
+                                    <label for="password">Password:</label>
+                                    <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                </div>
+                                <fieldset class="buttons">
+                                    <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                                    <div class="switch-form">
+                                        <p>Don't have an XMPP account?</p>
+                                        <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
                                     </div>
-                                    <div class="form-group">
-                                        <label for="password">Password:</label>
-                                        <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-                                    </div>
-                                    <fieldset class="buttons">
-                                        <p><input class="btn btn-primary" type="submit" value="Log In"></p>
-                                        <div class="switch-form">
-                                            <p>Don't have an XMPP account?</p>
-                                            <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
-                                        </div>
-                                    </fieldset>
-                                </form>
-                            </div>
+                                </fieldset>
+                            </form>
                         </div>
                     </div>
                 </div>

mockup/overlayed-login.html

@@ -11,7 +11,7 @@
 
 <body style="background-color: #578EA9">
 	<div class="converse-bg container">
-		<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+		<h1 class="brand-heading">Converse</h1>
 	</div>
 
 	<div id="conversejs">
@@ -20,25 +20,22 @@
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div id="login-dialog" class="controlbox-pane row">
-                            <div class="brand-heading-container col-12">
+                            <div class="brand-heading-container">
                                 <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
                             </div>
-
-                            <div class="col-12">
-                                <form id="converse-login" class="pure-form converse-form">
-                                    <div class="form-group">
-                                        <label for="jid">XMPP Username:</label>
-                                        <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="password">Password:</label>
-                                        <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-                                    </div>
-                                    <p></p>
-                                    <p><input class="btn btn-primary" type="submit" value="Log In"></p>
-                                    <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
-                                </form>
-                            </div>
+                            <form id="converse-login" class="pure-form converse-form">
+                                <div class="form-group">
+                                    <label for="jid">XMPP Username:</label>
+                                    <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                </div>
+                                <div class="form-group">
+                                    <label for="password">Password:</label>
+                                    <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                </div>
+                                <p></p>
+                                <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                                <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                            </form>
                         </div>
                     </div>
                 </div>
@@ -61,7 +58,6 @@
     document.addEventListener("DOMContentLoaded", function(event) { 
         new Modals();
         new Sidebar();
-        new UserPanel();    
     });
 </script>
 

sass/_controlbox.scss

@@ -148,6 +148,8 @@
         }
 
         .brand-heading-container {
+            @include make-col(12);
+
             .brand-heading {
                 text-align: center;
             }

sass/_core.scss

@@ -10,6 +10,35 @@ body.reset {
     margin: 0;
 }
 
+@font-face {
+    font-family: 'Converse-js';
+    src: url($font-path + 'icomoon.eot?wvi0ht');
+    src:  url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
+          url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
+          url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
+          url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icon-conversejs {
+    padding-right: 0.2em;
+    font-family: 'Converse-js';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-conversejs:before {
+    content: "\e600";
+}
+
 #conversejs {
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);

sass/converse/_controlbox.scss

@@ -2,6 +2,10 @@
     #controlbox {
         order: -1;
 
+        #converse-register, #converse-login {
+            @include make-col(12);
+        }
+
         #converse-register {
             .button-cancel {
                 font-size: 90%;

sass/inverse/_controlbox.scss

@@ -13,7 +13,6 @@
         #converse-login-panel {
             border-radius: 0;
             .converse-form {
-                margin: 0;
                 padding: 3em 2em 3em;
             }
         }
@@ -61,6 +60,22 @@
         }
 
         #converse-register, #converse-login {
+            @include make-col-ready();
+            @include make-col(8);
+            @include make-col-offset(2);
+
+            @include media-breakpoint-up(sm) {
+                @include make-col(8);
+                @include make-col-offset(2);
+            }
+            @include media-breakpoint-up(md) {
+                @include make-col(8);
+                @include make-col-offset(2);
+            }
+            @include media-breakpoint-up(lg) {
+                @include make-col(6);
+                @include make-col-offset(3);
+            }
             .title, .instructions {
                 margin: 1em 0;
             }

sass/inverse/inverse.scss

@@ -12,7 +12,6 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
-
 #conversejs {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";

src/converse-controlbox.js

@@ -251,6 +251,7 @@
                 },
 
                 render () {
+                    this.setClasses();
                     if (this.model.get('connected')) {
                         if (_.isUndefined(this.model.get('closed'))) {
                             this.model.set('closed', !_converse.show_controlbox_by_default);
@@ -277,6 +278,17 @@
                     return this;
                 },
 
+                setClasses () {
+                    if (_converse.view_mode !== 'fullscreen') {
+                        this.el.classList.add('col');
+                        this.el.classList.add('col-lg-2');
+                        this.el.classList.add('col-md-3');
+                        this.el.classList.add('col-sm-4');
+                        this.el.classList.add('col-sx-12');
+                        this.el.classList.add('w-100');
+                    }
+                },
+
                 onConnected () {
                     if (this.model.get('connected')) {
                         this.render();

src/templates/brand_heading.html

@@ -1,4 +1,3 @@
-<span class="brand-heading-container">
+<div class="brand-heading-container">
     <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
-    <p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
-<span>
+<div>

src/templates/inverse_brand_heading.html

@@ -1,7 +1,7 @@
 <div class="row">
-    <span class="container brand-heading-container col-12">
+    <div class="container brand-heading-container">
         <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
         <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
         <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
-    <span>
+    <div>
 </div>

src/templates/login_panel.html

@@ -1,37 +1,35 @@
 <div id="converse-login-panel" class="controlbox-pane fade-in row">
-    <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-        <form id="converse-login" class="converse-form" method="post">
-            <legend>{{{o.__("Login")}}}</legend>
-            <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
-                <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
-                <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
-            </div>
-            {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-                <span class="spinner centered"/>
-            {[ } else { ]}
-                {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
-                    <div class="form-group">
-                        <label for="jid">{{{o.__("XMPP Username:")}}}</label>
-                        <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
-                    </div>
-                    {[ if (o.authentication !== o.EXTERNAL) { ]}
-                    <div class="form-group">
-                        <label for="password">{{{o.__("Password:")}}}</label>
-                        <input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
-                    </div>
-                    {[ } ]}
-                    <fieldset class="buttons">
-                        <input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
-                    </fieldset>
-                {[ } ]}
-                {[ if (o.authentication == o.ANONYMOUS) { ]}
-                    <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
-                {[ } ]}
-                {[ if (o.authentication == o.PREBIND) { ]}
-                    <p>Disconnected.</p>
+    <form id="converse-login" class="converse-form" method="post">
+        <legend>{{{o.__("Login")}}}</legend>
+        <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
+            <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
+            <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
+        </div>
+        {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
+            <span class="spinner centered"/>
+        {[ } else { ]}
+            {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
+                <div class="form-group">
+                    <label for="jid">{{{o.__("XMPP Username:")}}}</label>
+                    <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
+                </div>
+                {[ if (o.authentication !== o.EXTERNAL) { ]}
+                <div class="form-group">
+                    <label for="password">{{{o.__("Password:")}}}</label>
+                    <input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
+                </div>
                 {[ } ]}
+                <fieldset class="buttons">
+                    <input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
+                </fieldset>
+            {[ } ]}
+            {[ if (o.authentication == o.ANONYMOUS) { ]}
+                <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
+            {[ } ]}
+            {[ if (o.authentication == o.PREBIND) { ]}
+                <p>Disconnected.</p>
             {[ } ]}
-            </fieldset>
-        </form>
-    </div>
+        {[ } ]}
+        </fieldset>
+    </form>
 </div>

src/templates/register_panel.html

@@ -1,30 +1,27 @@
 <div class="row">
-    <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-        <form id="converse-register" class="converse-form">
-            <legend>{{{o.__("Create your account")}}}</legend>
+    <form id="converse-register" class="converse-form">
+        <legend>{{{o.__("Create your account")}}}</legend>
 
-            <div class="form-group">
-                <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
-                <div class="form-errors hidden"></div>
+        <div class="form-group">
+            <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
+            <div class="form-errors hidden"></div>
 
-                {[ if (o.default_domain) { ]}
-                    {{{o.default_domain}}}
-                </div>
-                {[ } ]}
-                {[ if (!o.default_domain) { ]}
-                    <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
-                    <p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
-                </div>
-                <fieldset class="buttons">
-                    <input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
-                    <div class="switch-form">
-                        <p>{{{ o.__("Already have a chat account?") }}}</p>
-                        <p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
-                    </div>
-                </fieldset>
-                {[ } ]}
+            {[ if (o.default_domain) { ]}
+                {{{o.default_domain}}}
             </div>
-        </form>
-
-    </div>
+            {[ } ]}
+            {[ if (!o.default_domain) { ]}
+                <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
+                <p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
+            </div>
+            <fieldset class="buttons">
+                <input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
+                <div class="switch-form">
+                    <p>{{{ o.__("Already have a chat account?") }}}</p>
+                    <p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
+                </div>
+            </fieldset>
+            {[ } ]}
+        </div>
+    </form>
 </div>