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
Expand all Show 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,9 +1360,6 @@ 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 {
......@@ -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
This diff is collapsed.
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