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 { ...@@ -1254,24 +1254,7 @@ body .brand-heading {
margin: 0; } } margin: 0; } }
#conversejs #controlbox .pure-form.converse-form { #conversejs #controlbox .pure-form.converse-form {
padding: 0; } 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 { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
position: relative;
overflow-y: auto; } overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
margin: 0; margin: 0;
...@@ -1377,13 +1360,10 @@ body .brand-heading { ...@@ -1377,13 +1360,10 @@ body .brand-heading {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #users { #conversejs #controlbox #users .add-converse-contact {
overflow-y: hidden; margin: 0 0 0.75em 0; }
position: relative; } #conversejs #controlbox #users .chatbox-btn {
#conversejs #controlbox #users .add-converse-contact { margin: 0; }
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; } margin-top: 0.75em; }
#conversejs #controlbox #users .userinfo { #conversejs #controlbox #users .userinfo {
...@@ -1523,51 +1503,6 @@ body .brand-heading { ...@@ -1523,51 +1503,6 @@ body .brand-heading {
display: none; display: none;
float: right; float: right;
margin-right: 0.5em; } 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 { #conversejs #controlbox .fancy-dropdown {
border: 1px solid #B1BFC4; border: 1px solid #B1BFC4;
height: 25px; height: 25px;
...@@ -1620,12 +1555,11 @@ body .brand-heading { ...@@ -1620,12 +1555,11 @@ body .brand-heading {
background-color: white; background-color: white;
border: 0; border: 0;
font-size: 14px; font-size: 14px;
position: absolute;
left: 0; left: 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
border-radius: 4px; } border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .switch-form { #conversejs #controlbox .controlbox-pane .switch-form {
...@@ -1688,14 +1622,10 @@ body .brand-heading { ...@@ -1688,14 +1622,10 @@ body .brand-heading {
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel { #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; } font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-pane { #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
border-bottom-left-radius: 4px; border-radius: 4px; }
border-bottom-right-radius: 4px;
height: 289px;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#conversejs:not(.fullscreen) #controlbox .brand-heading-container .brand-heading { #conversejs:not(.fullscreen) #controlbox .brand-heading-container .brand-heading {
font-size: 2.2em; font-size: 2em;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator { #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
...@@ -1709,9 +1639,8 @@ body .brand-heading { ...@@ -1709,9 +1639,8 @@ body .brand-heading {
margin: 0; margin: 0;
height: 194px; height: 194px;
height: calc(~"100% - 50px - 20px"); height: calc(~"100% - 50px - 20px");
border-bottom: 1px solid #818479;
padding: 0 0 2em 0; padding: 0 0 2em 0;
overflow: scroll; overflow: hidden;
height: calc(100% - 70px); height: calc(100% - 70px);
/* Custom addition for CSP */ } /* Custom addition for CSP */ }
#conversejs #converse-roster.no-contact-requests { #conversejs #converse-roster.no-contact-requests {
...@@ -1868,6 +1797,7 @@ body .brand-heading { ...@@ -1868,6 +1797,7 @@ body .brand-heading {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover { #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; } color: #818479; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 16px; line-height: 16px;
width: 100%; } width: 100%; }
......
css/inverse.css
View file @ 6914ec61
...@@ -808,7 +808,9 @@ body { ...@@ -808,7 +808,9 @@ body {
#conversejs.fullscreen { #conversejs.fullscreen {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
left: 0; } bottom: 0;
left: 0;
right: 0; }
#conversejs.fullscreen form.pure-form.converse-form { #conversejs.fullscreen form.pure-form.converse-form {
margin: 1em; } margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] { #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
...@@ -826,6 +828,10 @@ body { ...@@ -826,6 +828,10 @@ body {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin-right: 1em; } margin-right: 1em; }
#conversejs.fullscreen.login {
width: calc(100vw - 1em);
height: calc(100vh - 1em);
margin: 0.5em; }
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
...@@ -1288,17 +1294,14 @@ body { ...@@ -1288,17 +1294,14 @@ body {
#conversejs.fullscreen .chat-head.chat-head-chatbox .close-chatbox-button { #conversejs.fullscreen .chat-head.chat-head-chatbox .close-chatbox-button {
display: none; } display: none; }
#conversejs.fullscreen .chatbox { #conversejs.fullscreen .chatbox {
width: 100%;
height: 100%; height: 100%;
margin: 0;
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px);
margin: 0; } margin: 0; }
#conversejs.fullscreen .chatbox .box-flyout { #conversejs.fullscreen .chatbox .box-flyout {
background-color: #3AA569; background-color: #3AA569;
width: -webkit-calc(100% - 250px); height: 100vh;
width: calc(100% - 250px); width: 100%;
box-shadow: none; box-shadow: none; }
min-width: auto; }
#conversejs.fullscreen .chatbox .chat-body { #conversejs.fullscreen .chatbox .chat-body {
background-color: #3AA569; background-color: #3AA569;
border-top-left-radius: 0; border-top-left-radius: 0;
...@@ -1341,24 +1344,7 @@ body { ...@@ -1341,24 +1344,7 @@ body {
margin: 0; } } margin: 0; } }
#conversejs #controlbox .pure-form.converse-form { #conversejs #controlbox .pure-form.converse-form {
padding: 0; } 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 { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
position: relative;
overflow-y: auto; } overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
margin: 0; margin: 0;
...@@ -1464,13 +1450,10 @@ body { ...@@ -1464,13 +1450,10 @@ body {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #users { #conversejs #controlbox #users .add-converse-contact {
overflow-y: hidden; margin: 0 0 0.75em 0; }
position: relative; } #conversejs #controlbox #users .chatbox-btn {
#conversejs #controlbox #users .add-converse-contact { margin: 0; }
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; } margin-top: 0.75em; }
#conversejs #controlbox #users .userinfo { #conversejs #controlbox #users .userinfo {
...@@ -1610,51 +1593,6 @@ body { ...@@ -1610,51 +1593,6 @@ body {
display: none; display: none;
float: right; float: right;
margin-right: 0.5em; } 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 { #conversejs #controlbox .fancy-dropdown {
border: 1px solid #B1BFC4; border: 1px solid #B1BFC4;
height: 30px; height: 30px;
...@@ -1707,12 +1645,11 @@ body { ...@@ -1707,12 +1645,11 @@ body {
background-color: white; background-color: white;
border: 0; border: 0;
font-size: 16px; font-size: 16px;
position: absolute;
left: 0; left: 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
border-radius: 0; } border-radius: 0; }
#conversejs #controlbox .controlbox-pane .switch-form { #conversejs #controlbox .controlbox-pane .switch-form {
...@@ -1774,10 +1711,14 @@ body { ...@@ -1774,10 +1711,14 @@ body {
color: #818479; } color: #818479; }
#conversejs.fullscreen #controlbox { #conversejs.fullscreen #controlbox {
min-width: 250px; width: 100%;
width: 200px;
float: left; float: left;
margin: 0; } 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 { #conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 30px; } line-height: 30px; }
#conversejs.fullscreen #controlbox .brand-heading-container { #conversejs.fullscreen #controlbox .brand-heading-container {
...@@ -1794,11 +1735,6 @@ body { ...@@ -1794,11 +1735,6 @@ body {
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#conversejs.fullscreen #controlbox .brand-heading-container .brand-heading { #conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } } 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 { #conversejs.fullscreen #controlbox.logged-out {
opacity: 0; opacity: 0;
/* make things invisible upon start */ /* make things invisible upon start */
...@@ -1817,21 +1753,11 @@ body { ...@@ -1817,21 +1753,11 @@ body {
width: 100%; } width: 100%; }
#conversejs.fullscreen #controlbox.logged-out .box-flyout { #conversejs.fullscreen #controlbox.logged-out .box-flyout {
width: 100%; } 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 { #conversejs.fullscreen #controlbox .box-flyout {
border: 0; border: 0;
min-width: 250px; width: 100%;
width: 200px;
z-index: 1; z-index: 1;
background-color: #578EA9; } 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 { #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
margin: 2em 30% 3em 30%; } 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 { #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 { ...@@ -1849,16 +1775,6 @@ body {
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-register,
#conversejs.fullscreen #controlbox #converse-login { #conversejs.fullscreen #controlbox #converse-login {
margin: 3em 10% 3em 10%; } } 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 { #conversejs #converse-roster {
text-align: left; text-align: left;
...@@ -1867,9 +1783,8 @@ body { ...@@ -1867,9 +1783,8 @@ body {
margin: 0; margin: 0;
height: 194px; height: 194px;
height: calc(~"100% - 60px - 20px"); height: calc(~"100% - 60px - 20px");
border-bottom: 1px solid #818479;
padding: 0 0 2em 0; padding: 0 0 2em 0;
overflow: scroll; overflow: hidden;
height: calc(100% - 70px); height: calc(100% - 70px);
/* Custom addition for CSP */ } /* Custom addition for CSP */ }
#conversejs #converse-roster.no-contact-requests { #conversejs #converse-roster.no-contact-requests {
...@@ -2026,6 +1941,7 @@ body { ...@@ -2026,6 +1941,7 @@ body {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover { #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; } color: #818479; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 22px; line-height: 22px;
width: 100%; } width: 100%; }
...@@ -2286,54 +2202,51 @@ body { ...@@ -2286,54 +2202,51 @@ body {
width: 100%; width: 100%;
border: 1px solid #999; } border: 1px solid #999; }
#conversejs .chat-head-chatroom { #conversejs.fullscreen .chat-head-chatroom {
height: 62px; height: 62px;
font-size: 20px; } font-size: 20px; }
#conversejs .chat-head-chatroom .close-chatbox-button:before { #conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before {
content: "\e601"; } content: "\e601"; }
#conversejs .chat-head-chatroom .chat-title .chatroom-description { #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
font-size: 65%; } font-size: 65%; }
#conversejs .chatroom { #conversejs.fullscreen .chatroom .box-flyout {
width: -webkit-calc(100% - 250px); background-color: #E77051;
width: calc(100% - 250px); } border: 1.2em solid #E77051;
#conversejs .chatroom .box-flyout { border-top: 0.8em solid #E77051;
background-color: #E77051; width: 100%; }
border: 1.2em solid #E77051; #conversejs.fullscreen .chatroom .box-flyout .chatroom-body {
border-top: 0.8em solid #E77051; border-top-left-radius: 0;
width: -webkit-calc(100% - 250px); border-top-right-radius: 0; }
width: calc(100% - 250px); } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container {
#conversejs .chatroom .box-flyout .chatroom-body { border-radius: 0; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; } min-width: auto;
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { height: calc(100vh - 95px); }
border-radius: 0; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 0; border-top-left-radius: 0;
min-width: auto; } padding: 0 1em 1em 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full {
border-top-left-radius: 0; max-width: 100%; }
padding: 0 1em 1em 1em; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; } max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants {
max-width: 100%; } border-top-right-radius: 0;
#conversejs .chatroom .box-flyout .chatroom-body .occupants { padding: 1em; }
border-top-right-radius: 0; #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 1em; } font-size: 18px; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
font-size: 18px; } bottom: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
bottom: 1em; } height: -webkit-calc(100% - 212px);
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { height: calc(100% - 212px); }
height: -webkit-calc(100% - 212px); #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
height: calc(100% - 212px); } font-size: 14px;
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li { width: 100%; }
font-size: 14px; #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
width: 100%; } font-size: 14px; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { #conversejs.fullscreen .chatroom .room-invite span .invited-contact {
font-size: 14px; } margin: 0 0 0.5em -1px; }
#conversejs .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox { #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; } 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) { @media screen and (max-width: 575px) {
body .brand-heading { body .brand-heading {
font-size: 3.75em; font-size: 3.75em;
......
sass/_controlbox.scss
View file @ 6914ec61
...@@ -13,28 +13,9 @@ ...@@ -13,28 +13,9 @@
padding: 0; 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 { &.logged-out {
.box-flyout { .box-flyout {
.controlbox-pane { .controlbox-pane {
position: relative;
overflow-y: auto; overflow-y: auto;
} }
} }
...@@ -182,9 +163,6 @@ ...@@ -182,9 +163,6 @@
} }
#users { #users {
overflow-y: hidden;
position: relative;
.add-converse-contact { .add-converse-contact {
margin: 0 0 0.75em 0; margin: 0 0 0.75em 0;
} }
...@@ -372,67 +350,6 @@ ...@@ -372,67 +350,6 @@
margin-right: 0.5em; 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 { .fancy-dropdown {
border: 1px solid $light-background-border-color; border: 1px solid $light-background-border-color;
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
...@@ -501,12 +418,11 @@ ...@@ -501,12 +418,11 @@
background-color: white; background-color: white;
border: 0; border: 0;
font-size: $font-size; font-size: $font-size;
position: absolute;
left: 0; left: 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
......
sass/_roster.scss
View file @ 6914ec61
...@@ -5,9 +5,8 @@ ...@@ -5,9 +5,8 @@
margin: 0; margin: 0;
height: $roster-height; height: $roster-height;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px"); height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
border-bottom: 1px solid $gray-color;
padding: 0 0 2em 0; padding: 0 0 2em 0;
overflow: scroll; overflow: hidden;
&.no-contact-requests { &.no-contact-requests {
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px"); height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
...@@ -230,6 +229,7 @@ ...@@ -230,6 +229,7 @@
} }
span { span {
&.pending-contact-name { &.pending-contact-name {
margin-top: 0.5em;
line-height: $line-height; line-height: $line-height;
width: 100%; width: 100%;
} }
......
sass/converse/_controlbox.scss
View file @ 6914ec61
...@@ -6,16 +6,13 @@ ...@@ -6,16 +6,13 @@
} }
} }
.controlbox-pane { .controlbox-panes {
border-bottom-left-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
height: 289px;
@include calc(height, '100% - #{$controlbox-head-height}');
} }
.brand-heading-container { .brand-heading-container {
.brand-heading { .brand-heading {
font-size: 2.2em; font-size: 2em;
margin: 1em 0; margin: 1em 0;
} }
} }
......
sass/inverse/_chatbox.scss
View file @ 6914ec61
...@@ -24,15 +24,14 @@ ...@@ -24,15 +24,14 @@
} }
} }
.chatbox { .chatbox {
width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@include calc(width, '100% - #{$controlbox-width}');
margin: 0;
.box-flyout { .box-flyout {
background-color: $chat-head-color; background-color: $chat-head-color;
@include calc(width, '100% - #{$controlbox-width}'); height: 100vh;
width: 100%;
box-shadow: none; box-shadow: none;
min-width: auto;
} }
.chat-body { .chat-body {
background-color: $chat-head-color; background-color: $chat-head-color;
......
sass/inverse/_chatrooms.scss
View file @ 6914ec61
#conversejs { #conversejs.fullscreen {
.chat-head-chatroom { .chat-head-chatroom {
height: $chatroom-head-height; height: $chatroom-head-height;
font-size: 20px; font-size: 20px;
...@@ -13,12 +14,13 @@ ...@@ -13,12 +14,13 @@
} }
.chatroom { .chatroom {
@include calc(width, '100% - #{$controlbox-width}');
.box-flyout { .box-flyout {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color; border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color; border-top: 0.8em solid $chatroom-head-color;
@include calc(width, '100% - #{$controlbox-width}'); width: 100%;
.chatroom-body { .chatroom-body {
@include border-top-radius($chatbox-border-radius); @include border-top-radius($chatbox-border-radius);
.chatroom-form-container { .chatroom-form-container {
...@@ -27,6 +29,8 @@ ...@@ -27,6 +29,8 @@
.chat-area { .chat-area {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
min-width: auto; min-width: auto;
height: calc(100vh - 95px);
.chat-content { .chat-content {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding; padding: 0 $padding $padding $padding;
......
sass/inverse/_controlbox.scss
View file @ 6914ec61
#conversejs.fullscreen { #conversejs.fullscreen {
#controlbox { #controlbox {
min-width: $controlbox-width; width: 100%;
width: 200px;
float: left; float: left;
margin: 0; margin: 0;
#login-dialog {
border-radius: 5px;
.converse-form {
margin: 0;
padding: 3em 2em 3em;
}
}
.toggle-register-login { .toggle-register-login {
line-height: $line-height-huge; line-height: $line-height-huge;
} }
...@@ -29,38 +37,20 @@ ...@@ -29,38 +37,20 @@
} }
} }
.controlbox-panes {
background-color: white;
}
.controlbox-pane {
@include calc(height, '100% - #{$controlbox-head-height}');
}
&.logged-out { &.logged-out {
@include fade-in; @include fade-in;
width: 100%; width: 100%;
.box-flyout { .box-flyout {
width: 100%; width: 100%;
.controlbox-head {
background-color: white;
height: 0;
}
.controlbox-pane {
height: auto;
}
} }
} }
.box-flyout { .box-flyout {
border: 0; border: 0;
min-width: $controlbox-width; width: 100%;
width: 200px;
z-index: 1; z-index: 1;
background-color: $controlbox-head-color; background-color: $controlbox-head-color;
} }
.controlbox-head {
height: $controlbox-head-height;
padding: 6px 0 6px 0;
margin-top: 0.5em;
}
#converse-register, #converse-login { #converse-register, #converse-login {
margin: 2em 30% 3em 30%; margin: 2em 30% 3em 30%;
.title, .instructions { .title, .instructions {
...@@ -84,20 +74,5 @@ ...@@ -84,20 +74,5 @@
margin: 3em 10% 3em 10%; 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 { ...@@ -40,7 +40,9 @@ body {
#conversejs.fullscreen { #conversejs.fullscreen {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
bottom: 0;
left: 0; left: 0;
right: 0;
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
...@@ -65,4 +67,10 @@ body { ...@@ -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