diff --git a/packages/rocketchat-livechat/app/client/stylesheets/main.less b/packages/rocketchat-livechat/app/client/stylesheets/main.less
index afad4f334141..c5f9ebbbb77d 100644
--- a/packages/rocketchat-livechat/app/client/stylesheets/main.less
+++ b/packages/rocketchat-livechat/app/client/stylesheets/main.less
@@ -3,6 +3,9 @@
@import "utils/_keyframes.import.less";
@import "utils/_loading.import.less";
+@smartphones: ~"only screen and (max-width: 480px)";
+@footer-min-height-media: 65px;
+
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -77,6 +80,10 @@ input:focus {
color: rgba(255, 255, 255, 0.85);
background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
+ @media @smartphones{
+ font-size: 15px;
+ }
+
span {
position: relative;
z-index: 2;
@@ -158,10 +165,22 @@ input:focus {
cursor: pointer;
padding: 0 10px;
+ @media @smartphones{
+ border-top-right-radius: 0px;
+ border-top-left-radius: 0px;
+ flex: 1 0 50px;
+ line-height: 50px;
+ }
+
h1 {
margin: 0;
font-size: 10pt;
display: inline-block;
+
+ @media @smartphones{
+ font-size: 13pt;
+ }
+
}
.toolbar {
@@ -169,16 +188,31 @@ input:focus {
float: right;
svg {
- cursor: pointer;
- fill: currentColor;
- width: 14px;
- margin: 0 5px;
- vertical-align: middle;
-
- &:last-of-type {
- margin-right: 0;
- }
+ cursor: pointer;
+ fill: currentColor;
+ width: 14px;
+ margin: 0 5px;
+ vertical-align: middle;
+
+ @media @smartphones {
+ width: 20px;
+ }
+
+ &:last-of-type {
+ margin-right: 0;
+ }
}
+ svg.maximize {
+ @media @smartphones{
+ display: none;
+ }
+ }
+ svg.popout {
+ @media @smartphones{
+ display: none;
+ }
+ }
+
}
}
@@ -205,14 +239,36 @@ input:focus {
.info {
flex: 1;
padding: 5px 0;
+ }
+
+ ul{
+
+ @media @smartphones{
+ width: 95%;
+ margin-right: -10px;
+
+ }
h2 {
color: @primary-font-color;
font-size: 14px;
+
+ @media @smartphones{
+ font-size: 16px;
+ margin-bottom: 7px;
+ margin-top: 5px;
+ }
}
li {
font-size: 11px;
+
+ @media @smartphones{
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
}
}
}
@@ -224,9 +280,17 @@ input:focus {
border-right: 1px solid @window-border-color;
overflow-y: auto;
+ @media @smartphones{
+ margin-bottom: 64px;
+ }
+
.wrapper {
padding-bottom: 6px;
+ @media @smartphones{
+ padding-bottom: 13px;
+ }
+
ul {
list-style-type: none;
padding: 0;
@@ -243,6 +307,10 @@ input:focus {
line-height: 18px;
min-height: 36px;
+ @media @smartphones{
+ line-height: 18px;
+ }
+
&::after {
content: '';
display: block;
@@ -299,6 +367,10 @@ input:focus {
padding: 0 10px;
background-color: #ffffff;
min-width: 120px;
+
+ @media @smartphones{
+ font-size:12px;
+ }
}
.content {
@@ -354,6 +426,11 @@ input:focus {
margin-right: 5px;
outline: none;
+ @media @smartphones{
+ font-size: 15px;
+ margin-bottom: 5px;
+ }
+
&:hover {
color: #333333;
}
@@ -378,6 +455,10 @@ input:focus {
left: -10px;
width: 55px;
+ @media @smartphones{
+ font-size: 10px;
+ }
+
.edited {
display: inline-block;
}
@@ -433,6 +514,10 @@ input:focus {
.body {
opacity: 1;
transition: opacity 1s linear;
+
+ @media @smartphones{
+ font-size: 15px;
+ }
}
&.temp .body {
@@ -476,9 +561,19 @@ input:focus {
z-index: 5;
transition: transform 0.3s ease-out;
transform: translateY(-40px);
+ visibility: visible;
+
+ @media @smartphones{
+ width: 145px;
+ height: 34px;
+ font-size: 14px;
+ line-height: 33px;
+ bottom: 30px;
+ }
&.not {
transform: translateY(100%);
+ visibility: hidden;
}
}
@@ -491,9 +586,15 @@ input:focus {
z-index: 8;
transition: transform 0.2s ease-out;
transform: translateY(100%);
+ visibility: hidden;
+
+ @media @smartphones{
+ bottom: @footer-min-height-media;
+ }
&.show {
transform: translateY(0);
+ visibility: visible;
}
}
}
@@ -506,6 +607,13 @@ input:focus {
border-left: 1px solid @window-border-color;
border-right: 1px solid @window-border-color;
+ @media @smartphones{
+ flex: 1 0 @footer-min-height-media;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ }
+
.message-bar {
display: flex;
flex-direction: row;
@@ -530,6 +638,12 @@ input:focus {
line-height: normal;
background-color: #ffffff;
position: relative;
+
+ @media @smartphones{
+ padding-top:7px;
+ font-size: 15px;
+ height: 35px!important;
+ }
}
}
@@ -547,6 +661,11 @@ input:focus {
cursor: pointer;
transition: fill 0.15s ease-out;
+ @media @smartphones{
+ width: 23px;
+ height: 23px;
+ }
+
&:hover {
fill: @primary-font-color;
}
@@ -561,6 +680,11 @@ input:focus {
outline: none;
margin-top: 5px;
font-size: 0.65rem;
+
+ @media @smartphones{
+ margin-top: 5px;
+ margin-bottom: 6px;
+ }
}
.typing {
@@ -570,6 +694,11 @@ input:focus {
outline: none;
margin-top: 2px;
font-size: 0.65rem;
+
+ @media @smartphones{
+ margin-top: 4px;
+ margin-bottom: 4px;
+ }
}
.options-menu {
@@ -609,6 +738,10 @@ input:focus {
display: block;
padding: 4px 2px;
outline: none;
+
+ @media @smartphones{
+ font-size: 14px;
+ }
}
}
}
@@ -622,6 +755,10 @@ input:focus {
border-left: 1px solid @window-border-color;
border-right: 1px solid @window-border-color;
+ @media @smartphones{
+ font-size: 15px;
+ }
+
.offline-message {
padding: 1em 0;
}
@@ -635,10 +772,18 @@ input:focus {
textarea {
display: block;
width: 100%;
+
+ @media @smartphones {
+ width: 85%;
+ margin: 15px auto;
+ }
}
.buttons {
text-align: center;
+ @media @smartphones{
+ font-size: 15px!important;
+ }
}
.error {
@@ -685,6 +830,15 @@ input:focus {
input,
select {
width: 100%;
+
+ @media @smartphones{
+ font-size: 15px;
+ }
+
+ @media @smartphones {
+ margin: 15px auto;
+ width: 85%;
+ }
}
}
}
@@ -774,6 +928,8 @@ input:focus {
opacity: 0.5;
align-self: flex-end;
transition: opacity 0.15s ease-out;
+ bottom: 0;
+ position: fixed;
&:hover {
opacity: 1;
diff --git a/packages/rocketchat-livechat/app/client/views/livechatWindow.html b/packages/rocketchat-livechat/app/client/views/livechatWindow.html
index 5946a7eca43a..98357f1ad66a 100644
--- a/packages/rocketchat-livechat/app/client/views/livechatWindow.html
+++ b/packages/rocketchat-livechat/app/client/views/livechatWindow.html
@@ -47,7 +47,6 @@ {{title}}
{{> offlineForm (offlineData)}}
{{/if}}
- {{> poweredBy }}
{{/if}}
{{/if}}
diff --git a/packages/rocketchat-livechat/app/client/views/messages.html b/packages/rocketchat-livechat/app/client/views/messages.html
index 7698ca27f444..fd4258af91cd 100644
--- a/packages/rocketchat-livechat/app/client/views/messages.html
+++ b/packages/rocketchat-livechat/app/client/views/messages.html
@@ -73,5 +73,6 @@
{{> options show=showOptions}}
{{/if}}
+ {{> poweredBy }}
diff --git a/packages/rocketchat-livechat/app/client/views/offlineForm.html b/packages/rocketchat-livechat/app/client/views/offlineForm.html
index 655687876b9b..868361f356b4 100644
--- a/packages/rocketchat-livechat/app/client/views/offlineForm.html
+++ b/packages/rocketchat-livechat/app/client/views/offlineForm.html
@@ -20,6 +20,7 @@
+ {{> poweredBy }}
{{/if}}
{{else}}
{{{offlineUnavailableMessage}}}
diff --git a/packages/rocketchat-livechat/app/client/views/register.html b/packages/rocketchat-livechat/app/client/views/register.html
index 9538e7113b9c..dd8725ad41f0 100644
--- a/packages/rocketchat-livechat/app/client/views/register.html
+++ b/packages/rocketchat-livechat/app/client/views/register.html
@@ -26,5 +26,6 @@
{{/if}}
+ {{> poweredBy }}