Move fullscreen styles from mockup.css to sass files

css/converse.css

@@ -1254,24 +1254,7 @@ body .brand-heading {
       margin: 0; } }
   #conversejs #controlbox .pure-form.converse-form {
     padding: 0; }
-  #conversejs #controlbox .controlbox-head {
-    background-color: #578EA9;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    color: white;
-    height: 55px;
-    margin: 0;
-    padding: 6px 6px 6px 0; }
-    @media screen and (max-height: 450px) {
-      #conversejs #controlbox .controlbox-head {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0; } }
-    @media screen and (max-width: 480px) {
-      #conversejs #controlbox .controlbox-head {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0; } }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
-    position: relative;
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
@@ -1377,13 +1360,10 @@ body .brand-heading {
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users {
-    overflow-y: hidden;
-    position: relative; }
-    #conversejs #controlbox #users .add-converse-contact {
-      margin: 0 0 0.75em 0; }
-    #conversejs #controlbox #users .chatbox-btn {
-      margin: 0; }
+  #conversejs #controlbox #users .add-converse-contact {
+    margin: 0 0 0.75em 0; }
+  #conversejs #controlbox #users .chatbox-btn {
+    margin: 0; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
     margin-top: 0.75em; }
   #conversejs #controlbox #users .userinfo {
@@ -1523,51 +1503,6 @@ body .brand-heading {
     display: none;
     float: right;
     margin-right: 0.5em; }
-  #conversejs #controlbox #controlbox-tabs {
-    text-align: center;
-    display: inline;
-    overflow: hidden;
-    list-style-type: none;
-    /* single tab */ }
-    #conversejs #controlbox #controlbox-tabs li {
-      float: left;
-      list-style: none;
-      padding-left: 0;
-      text-shadow: white 0 1px 0;
-      width: 40%; }
-      #conversejs #controlbox #controlbox-tabs li a {
-        background-color: white;
-        border-bottom: 1px solid #CCC;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-        color: #777;
-        display: block;
-        font-size: 12px;
-        height: 54px;
-        line-height: 54px;
-        margin: 0;
-        text-align: center;
-        text-decoration: none; }
-        #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #3AA569; }
-        #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
-          background-color: #E77051; }
-        #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
-          border: solid white 2px;
-          opacity: 0.8;
-          border-top-right-radius: 5px;
-          float: right; }
-        #conversejs #controlbox #controlbox-tabs li a:hover {
-          color: #777; }
-          #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
-            opacity: 1; }
-        #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
-          box-shadow: none;
-          border-bottom: 0;
-          height: 55px;
-          cursor: default;
-          color: #777; }
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
@@ -1620,12 +1555,11 @@ body .brand-heading {
     background-color: white;
     border: 0;
     font-size: 14px;
-    position: absolute;
     left: 0;
     text-align: left;
     width: 100%;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: hidden;
     overflow-x: hidden;
     border-radius: 4px; }
     #conversejs #controlbox .controlbox-pane .switch-form {
@@ -1688,14 +1622,10 @@ body .brand-heading {
 
 #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
   font-size: 90%; }
-#conversejs:not(.fullscreen) #controlbox .controlbox-pane {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  height: 289px;
-  height: -webkit-calc(100% - 55px);
-  height: calc(100% - 55px); }
+#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
+  border-radius: 4px; }
 #conversejs:not(.fullscreen) #controlbox .brand-heading-container .brand-heading {
-  font-size: 2.2em;
+  font-size: 2em;
   margin: 1em 0; }
 
 #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
@@ -1709,9 +1639,8 @@ body .brand-heading {
   margin: 0;
   height: 194px;
   height: calc(~"100% - 50px - 20px");
-  border-bottom: 1px solid #818479;
   padding: 0 0 2em 0;
-  overflow: scroll;
+  overflow: hidden;
   height: calc(100% - 70px);
   /* Custom addition for CSP */ }
   #conversejs #converse-roster.no-contact-requests {
@@ -1868,6 +1797,7 @@ body .brand-heading {
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
             color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
+    margin-top: 0.5em;
     line-height: 16px;
     width: 100%; }
 

css/inverse.css

@@ -808,7 +808,9 @@ body {
 #conversejs.fullscreen {
   width: 100vw;
   height: 100vh;
-  left: 0; }
+  bottom: 0;
+  left: 0;
+  right: 0; }
   #conversejs.fullscreen form.pure-form.converse-form {
     margin: 1em; }
     #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
@@ -826,6 +828,10 @@ body {
       padding-left: 1em;
       padding-right: 1em;
       margin-right: 1em; }
+  #conversejs.fullscreen.login {
+    width: calc(100vw - 1em);
+    height: calc(100vh - 1em);
+    margin: 0.5em; }
 
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
@@ -1288,17 +1294,14 @@ body {
   #conversejs.fullscreen .chat-head.chat-head-chatbox .close-chatbox-button {
     display: none; }
 #conversejs.fullscreen .chatbox {
+  width: 100%;
   height: 100%;
-  margin: 0;
-  width: -webkit-calc(100% - 250px);
-  width: calc(100% - 250px);
   margin: 0; }
   #conversejs.fullscreen .chatbox .box-flyout {
     background-color: #3AA569;
-    width: -webkit-calc(100% - 250px);
-    width: calc(100% - 250px);
-    box-shadow: none;
-    min-width: auto; }
+    height: 100vh;
+    width: 100%;
+    box-shadow: none; }
   #conversejs.fullscreen .chatbox .chat-body {
     background-color: #3AA569;
     border-top-left-radius: 0;
@@ -1341,24 +1344,7 @@ body {
       margin: 0; } }
   #conversejs #controlbox .pure-form.converse-form {
     padding: 0; }
-  #conversejs #controlbox .controlbox-head {
-    background-color: #578EA9;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    color: white;
-    height: 62px;
-    margin: 0;
-    padding: 6px 6px 6px 0; }
-    @media screen and (max-height: 450px) {
-      #conversejs #controlbox .controlbox-head {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0; } }
-    @media screen and (max-width: 480px) {
-      #conversejs #controlbox .controlbox-head {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0; } }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
-    position: relative;
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
@@ -1464,13 +1450,10 @@ body {
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users {
-    overflow-y: hidden;
-    position: relative; }
-    #conversejs #controlbox #users .add-converse-contact {
-      margin: 0 0 0.75em 0; }
-    #conversejs #controlbox #users .chatbox-btn {
-      margin: 0; }
+  #conversejs #controlbox #users .add-converse-contact {
+    margin: 0 0 0.75em 0; }
+  #conversejs #controlbox #users .chatbox-btn {
+    margin: 0; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
     margin-top: 0.75em; }
   #conversejs #controlbox #users .userinfo {
@@ -1610,51 +1593,6 @@ body {
     display: none;
     float: right;
     margin-right: 0.5em; }
-  #conversejs #controlbox #controlbox-tabs {
-    text-align: center;
-    display: inline;
-    overflow: hidden;
-    list-style-type: none;
-    /* single tab */ }
-    #conversejs #controlbox #controlbox-tabs li {
-      float: left;
-      list-style: none;
-      padding-left: 0;
-      text-shadow: white 0 1px 0;
-      width: 40%; }
-      #conversejs #controlbox #controlbox-tabs li a {
-        background-color: white;
-        border-bottom: 1px solid #CCC;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-        color: #777;
-        display: block;
-        font-size: 14px;
-        height: 61px;
-        line-height: 61px;
-        margin: 0;
-        text-align: center;
-        text-decoration: none; }
-        #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #3AA569; }
-        #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
-          background-color: #E77051; }
-        #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
-          border: solid white 2px;
-          opacity: 0.8;
-          border-top-right-radius: 5px;
-          float: right; }
-        #conversejs #controlbox #controlbox-tabs li a:hover {
-          color: #777; }
-          #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
-            opacity: 1; }
-        #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
-          box-shadow: none;
-          border-bottom: 0;
-          height: 62px;
-          cursor: default;
-          color: #777; }
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 30px;
@@ -1707,12 +1645,11 @@ body {
     background-color: white;
     border: 0;
     font-size: 16px;
-    position: absolute;
     left: 0;
     text-align: left;
     width: 100%;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: hidden;
     overflow-x: hidden;
     border-radius: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
@@ -1774,10 +1711,14 @@ body {
   color: #818479; }
 
 #conversejs.fullscreen #controlbox {
-  min-width: 250px;
-  width: 200px;
+  width: 100%;
   float: left;
   margin: 0; }
+  #conversejs.fullscreen #controlbox #login-dialog {
+    border-radius: 5px; }
+    #conversejs.fullscreen #controlbox #login-dialog .converse-form {
+      margin: 0;
+      padding: 3em 2em 3em; }
   #conversejs.fullscreen #controlbox .toggle-register-login {
     line-height: 30px; }
   #conversejs.fullscreen #controlbox .brand-heading-container {
@@ -1794,11 +1735,6 @@ body {
     @media screen and (max-width: 480px) {
       #conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
         font-size: 400%; } }
-  #conversejs.fullscreen #controlbox .controlbox-panes {
-    background-color: white; }
-  #conversejs.fullscreen #controlbox .controlbox-pane {
-    height: -webkit-calc(100% - 63px);
-    height: calc(100% - 63px); }
   #conversejs.fullscreen #controlbox.logged-out {
     opacity: 0;
     /* make things invisible upon start */
@@ -1817,21 +1753,11 @@ body {
     width: 100%; }
     #conversejs.fullscreen #controlbox.logged-out .box-flyout {
       width: 100%; }
-      #conversejs.fullscreen #controlbox.logged-out .box-flyout .controlbox-head {
-        background-color: white;
-        height: 0; }
-      #conversejs.fullscreen #controlbox.logged-out .box-flyout .controlbox-pane {
-        height: auto; }
   #conversejs.fullscreen #controlbox .box-flyout {
     border: 0;
-    min-width: 250px;
-    width: 200px;
+    width: 100%;
     z-index: 1;
     background-color: #578EA9; }
-  #conversejs.fullscreen #controlbox .controlbox-head {
-    height: 63px;
-    padding: 6px 0 6px 0;
-    margin-top: 0.5em; }
   #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
     margin: 2em 30% 3em 30%; }
     #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
@@ -1849,16 +1775,6 @@ body {
     #conversejs.fullscreen #controlbox #converse-register,
     #conversejs.fullscreen #controlbox #converse-login {
       margin: 3em 10% 3em 10%; } }
-  #conversejs.fullscreen #controlbox #controlbox-tabs {
-    /* single tab */ }
-    #conversejs.fullscreen #controlbox #controlbox-tabs li {
-      width: 50%; }
-      #conversejs.fullscreen #controlbox #controlbox-tabs li a {
-        height: 62px;
-        line-height: 62px;
-        font-size: 18px; }
-        #conversejs.fullscreen #controlbox #controlbox-tabs li a.current, #conversejs.fullscreen #controlbox #controlbox-tabs li a.current:hover {
-          height: 63px; }
 
 #conversejs #converse-roster {
   text-align: left;
@@ -1867,9 +1783,8 @@ body {
   margin: 0;
   height: 194px;
   height: calc(~"100% - 60px - 20px");
-  border-bottom: 1px solid #818479;
   padding: 0 0 2em 0;
-  overflow: scroll;
+  overflow: hidden;
   height: calc(100% - 70px);
   /* Custom addition for CSP */ }
   #conversejs #converse-roster.no-contact-requests {
@@ -2026,6 +1941,7 @@ body {
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
             color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
+    margin-top: 0.5em;
     line-height: 22px;
     width: 100%; }
 
@@ -2286,54 +2202,51 @@ body {
     width: 100%;
     border: 1px solid #999; }
 
-#conversejs .chat-head-chatroom {
+#conversejs.fullscreen .chat-head-chatroom {
   height: 62px;
   font-size: 20px; }
-  #conversejs .chat-head-chatroom .close-chatbox-button:before {
+  #conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before {
     content: "\e601"; }
-  #conversejs .chat-head-chatroom .chat-title .chatroom-description {
+  #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
     font-size: 65%; }
-#conversejs .chatroom {
-  width: -webkit-calc(100% - 250px);
-  width: calc(100% - 250px); }
-  #conversejs .chatroom .box-flyout {
-    background-color: #E77051;
-    border: 1.2em solid #E77051;
-    border-top: 0.8em solid #E77051;
-    width: -webkit-calc(100% - 250px);
-    width: calc(100% - 250px); }
-    #conversejs .chatroom .box-flyout .chatroom-body {
+#conversejs.fullscreen .chatroom .box-flyout {
+  background-color: #E77051;
+  border: 1.2em solid #E77051;
+  border-top: 0.8em solid #E77051;
+  width: 100%; }
+  #conversejs.fullscreen .chatroom .box-flyout .chatroom-body {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0; }
+    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+      border-radius: 0; }
+    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
       border-top-left-radius: 0;
-      border-top-right-radius: 0; }
-      #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
-        border-radius: 0; }
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
+      min-width: auto;
+      height: calc(100vh - 95px); }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
         border-top-left-radius: 0;
-        min-width: auto; }
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          border-top-left-radius: 0;
-          padding: 0 1em 1em 1em; }
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
+        padding: 0 1em 1em 1em; }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full {
+        max-width: 100%; }
+        #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
           max-width: 100%; }
-          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
-            max-width: 100%; }
-      #conversejs .chatroom .box-flyout .chatroom-body .occupants {
-        border-top-right-radius: 0;
-        padding: 1em; }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
-          font-size: 18px; }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          bottom: 1em; }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
-          height: -webkit-calc(100% - 212px);
-          height: calc(100% - 212px); }
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
-            font-size: 14px;
-            width: 100%; }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
-          font-size: 14px; }
-  #conversejs .chatroom .room-invite span .invited-contact {
-    margin: 0 0 0.5em -1px; }
+    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants {
+      border-top-right-radius: 0;
+      padding: 1em; }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+        font-size: 18px; }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
+        bottom: 1em; }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
+        height: -webkit-calc(100% - 212px);
+        height: calc(100% - 212px); }
+        #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
+          font-size: 14px;
+          width: 100%; }
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+        font-size: 14px; }
+#conversejs.fullscreen .chatroom .room-invite span .invited-contact {
+  margin: 0 0 0.5em -1px; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }

mockup/css/mockup.css

@@ -1,52 +1,3 @@
-#conversejs.fullscreen {
-  width: 100%;
-  height: 100%;
-  right: 0;
-  bottom: 0;
-}
-#conversejs.fullscreen.login {
-  width: calc(100vw - 20px);
-  height: calc(100vh - 20px);
-  margin: 10px;
-}
-#conversejs.fullscreen.login #controlbox #login-dialog {
-  height: 100%;
-  border-radius: 5px;
-}
-#conversejs.fullscreen.login #controlbox #login-dialog .brand-heading {
-  font-size: 6em;
-}
-#conversejs.fullscreen.login #controlbox #login-dialog .converse-form {
-  margin: 0;
-  padding: 3em 2em 3em;
-}
-#conversejs.fullscreen.chatbox {
-  margin: 0;
-}
-#conversejs.fullscreen.chatbox .chatbox {
-  width: 100%;
-}
-#conversejs.fullscreen.chatbox .chatbox .box-flyout {
-  width: 100%;
-  height: 100vh;
-}
-#conversejs.fullscreen #controlbox {
-  width: 100%;
-  margin-right: 0;
-}
-#conversejs.fullscreen #controlbox .box-flyout {
-  width: 100%;
-}
-#conversejs.fullscreen #controlbox .controlbox-pane {
-  height: 100vh;
-  border-radius: 0;
-}
-#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
-  height: calc(100vh - 95px);
-}
-#conversejs #users #chatrooms .rooms-list-container dl.rooms-list a + a {
-  line-height: 22px;
-}
 @media screen and (max-width: 575px) {
   body .brand-heading {
     font-size: 3.75em;

sass/_controlbox.scss

@@ -13,28 +13,9 @@
             padding: 0;
         }
 
-        .controlbox-head {
-            background-color: $controlbox-head-color;
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
-            @media screen and (max-height: $mobile-landscape-height) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-            @media screen and (max-width: $mobile-portrait-length) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-            color: $chat-head-inverse-text-color;
-            height: $chat-head-height;
-            margin: 0;
-            padding: 6px 6px 6px 0;
-        }
-
         &.logged-out {
             .box-flyout {
                 .controlbox-pane {
-                    position: relative;
                     overflow-y: auto;
                 }
             }
@@ -182,9 +163,6 @@
         }
 
         #users {
-            overflow-y: hidden;
-            position: relative;
-
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
             }
@@ -372,67 +350,6 @@
             margin-right: 0.5em;
         }
 
-        #controlbox-tabs {
-            text-align: center;
-            display: inline;
-            overflow: hidden;
-            list-style-type: none;
-
-            /* single tab */
-            li {
-                float: left;
-                list-style: none;
-                padding-left: 0;
-                text-shadow: white 0 1px 0;
-                width: 40%;
-                a {
-                    background-color: white;
-                    border-bottom: 1px solid $border-color;
-                    border-top-left-radius: $button-border-radius;
-                    border-top-right-radius: $button-border-radius;
-                    box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-                    color: $text-color;
-                    display: block;
-                    font-size: $font-size-small;
-                    height: $chat-head-height - 1px;
-                    line-height: $chat-head-height - 1px;
-                    margin: 0;
-                    text-align: center;
-                    text-decoration: none;
-                    &.contacts-tab {
-                        .msgs-indicator {
-                            background-color: $chat-head-color;
-                        }
-                    }
-                    &.rooms-tab {
-                        .msgs-indicator {
-                            background-color: $chatroom-head-color;
-                        }
-                    }
-                    .msgs-indicator {
-                        border: solid white 2px;
-                        opacity: 0.8;
-                        border-top-right-radius: $button-border-radius;
-                        float: right;
-                    }
-                    &:hover {
-                        color: $text-color;
-                        .msgs-indicator {
-                            opacity: 1;
-                        }
-                    }
-                    &.current,
-                    &.current:hover {
-                        box-shadow: none;
-                        border-bottom: 0;
-                        height: $chat-head-height;
-                        cursor: default;
-                        color: $text-color;
-                    }
-                }
-            }
-        }
-
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
@@ -501,12 +418,11 @@
             background-color: white;
             border: 0;
             font-size: $font-size;
-            position: absolute;
             left: 0;
             text-align: left;
             width: 100%;
             height: 100%;
-            overflow-y: auto;
+            overflow-y: hidden;
             overflow-x: hidden;
             border-radius: $chatbox-border-radius;
 

sass/_roster.scss

@@ -5,9 +5,8 @@
     margin: 0;
     height: $roster-height;
     height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
-    border-bottom: 1px solid $gray-color;
     padding: 0 0 2em 0;
-    overflow: scroll;
+    overflow: hidden;
 
     &.no-contact-requests {
         height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
@@ -230,6 +229,7 @@
     }
     span {
         &.pending-contact-name {
+            margin-top: 0.5em;
             line-height: $line-height;
             width: 100%;
         }

sass/converse/_controlbox.scss

@@ -6,16 +6,13 @@
             }
         }
 
-        .controlbox-pane {
-            border-bottom-left-radius: $chatbox-border-radius;
-            border-bottom-right-radius: $chatbox-border-radius;
-            height: 289px;
-            @include calc(height, '100% - #{$controlbox-head-height}');
+        .controlbox-panes {
+            border-radius: $chatbox-border-radius;
         }
 
         .brand-heading-container {
             .brand-heading {
-                font-size: 2.2em;
+                font-size: 2em;
                 margin: 1em 0;
             }
         }

sass/inverse/_chatbox.scss

@@ -24,15 +24,14 @@
         }
     }
     .chatbox {
+        width: 100%;
         height: 100%;
         margin: 0;
-        @include calc(width, '100% - #{$controlbox-width}');
-        margin: 0;
         .box-flyout {
             background-color: $chat-head-color;
-            @include calc(width, '100% - #{$controlbox-width}');
+            height: 100vh;
+            width: 100%;
             box-shadow: none;
-            min-width: auto;
         }
         .chat-body {
             background-color: $chat-head-color;

sass/inverse/_chatrooms.scss

@@ -1,4 +1,5 @@
-#conversejs {
+#conversejs.fullscreen {
+
     .chat-head-chatroom {
         height: $chatroom-head-height;
         font-size: 20px;
@@ -13,12 +14,13 @@
     }
 
     .chatroom {
-        @include calc(width, '100% - #{$controlbox-width}');
+
         .box-flyout {
             background-color: $chatroom-head-color;
             border: $flyout-padding solid $chatroom-head-color;
             border-top: 0.8em solid $chatroom-head-color;
-            @include calc(width, '100% - #{$controlbox-width}');
+            width: 100%;
+
             .chatroom-body {
                 @include border-top-radius($chatbox-border-radius);
                 .chatroom-form-container {
@@ -27,6 +29,8 @@
                 .chat-area {
                     border-top-left-radius: $chatbox-border-radius;
                     min-width: auto;
+                    height: calc(100vh - 95px);
+
                     .chat-content {
                         border-top-left-radius: $chatbox-border-radius;
                         padding: 0 $padding $padding $padding;

sass/inverse/_controlbox.scss

@@ -1,10 +1,18 @@
 #conversejs.fullscreen {
+
     #controlbox {
-        min-width: $controlbox-width;
-        width: 200px;
+        width: 100%;
         float: left;
         margin: 0;
 
+        #login-dialog {
+            border-radius: 5px;
+            .converse-form {
+                margin: 0;
+                padding: 3em 2em 3em;
+            }
+        }
+
         .toggle-register-login {
             line-height: $line-height-huge;
         }
@@ -29,38 +37,20 @@
             }
         }
 
-        .controlbox-panes {
-            background-color: white;
-        }
-        .controlbox-pane {
-            @include calc(height, '100% - #{$controlbox-head-height}');
-        }
         &.logged-out {
             @include fade-in;
             width: 100%;
             .box-flyout {
                 width: 100%;
-                .controlbox-head {
-                    background-color: white;
-                    height: 0;
-                }
-                .controlbox-pane {
-                    height: auto;
-                }
             }
         }
         .box-flyout {
             border: 0;
-            min-width: $controlbox-width;
-            width: 200px;
+            width: 100%;
             z-index: 1;
             background-color: $controlbox-head-color;
         }
-        .controlbox-head {
-            height: $controlbox-head-height;
-            padding: 6px 0 6px 0;
-            margin-top: 0.5em;
-        }
+
         #converse-register, #converse-login {
             margin: 2em 30% 3em 30%;
             .title, .instructions {
@@ -84,20 +74,5 @@
                 margin: 3em 10% 3em 10%;
             }
         }
-        #controlbox-tabs {
-            /* single tab */
-            li {
-                width: 50%;
-                a {
-                    height: $controlbox-head-height - 1px;
-                    line-height: $controlbox-head-height - 1px;
-                    &.current,
-                    &.current:hover {
-                        height: $controlbox-head-height;
-                    }
-                    font-size: $font-size-large;
-                }
-            }
-        }
     }
 }

sass/inverse/_core.scss

@@ -40,7 +40,9 @@ body {
 #conversejs.fullscreen {
     width: 100vw;
     height: 100vh;
+    bottom: 0;
     left: 0;
+    right: 0;
 
     form {
         &.pure-form.converse-form {
@@ -65,4 +67,10 @@ body {
             }
         }
     }
+
+    &.login {
+        width: calc(100vw - 1em);
+        height: calc(100vh - 1em);
+        margin: 0.5em;
+    }
 }