Skip to content

C
converse.js
Commit 6914ec61 authored by JC Brand's avatar JC Brand
Browse files
Options

Move fullscreen styles from mockup.css to sass files

parent 5568ac5a
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 416 deletions
css/converse.css
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
#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
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
......@@ -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
View file @ 6914ec61
#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
View file @ 6914ec61
#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
View file @ 6914ec61
......@@ -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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7