move width-specific css to bottom + transfer js-css to a class [#chatbox:.stickyChat]
parent
255cf8c5f0
commit
12298a926c
|
@ -1104,83 +1104,6 @@ width:33px !important;
|
||||||
transform: scale(1.5);
|
transform: scale(1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
|
||||||
.modaldialog {
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 80%;
|
|
||||||
top: 40px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
#editbar ul li {
|
|
||||||
padding: 4px 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
|
|
||||||
#editbar ul li {
|
|
||||||
padding: 4px 3px;
|
|
||||||
}
|
|
||||||
#editbar ul#menu_right > li {
|
|
||||||
padding: 4px 8px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
#chaticon {
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
#users {
|
|
||||||
right: 4px;
|
|
||||||
}
|
|
||||||
#mycolorpicker {
|
|
||||||
left: -72px; /* #mycolorpicker:width - #users:width */
|
|
||||||
}
|
|
||||||
#editorcontainer {
|
|
||||||
margin-bottom: 33px;
|
|
||||||
}
|
|
||||||
#editbar ul#menu_right {
|
|
||||||
background: #f7f7f7;
|
|
||||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 32px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
#editbar ul#menu_right li:not(:last-child) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#editbar ul#menu_right li:last-child {
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
border: 0;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#chaticon {
|
|
||||||
bottom: 0;
|
|
||||||
right: 55px;
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background: #f7f7f7;
|
|
||||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
#chatbox {
|
|
||||||
bottom: 32px;
|
|
||||||
right: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
#editbar ul li a span {
|
|
||||||
top: -3px;
|
|
||||||
}
|
|
||||||
#usericonback {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rtl{
|
.rtl{
|
||||||
direction:RTL;
|
direction:RTL;
|
||||||
}
|
}
|
||||||
|
@ -1262,3 +1185,93 @@ label {
|
||||||
background: #eee !important;
|
background: #eee !important;
|
||||||
background: linear-gradient(#EEE, #F0F0F0) !important;
|
background: linear-gradient(#EEE, #F0F0F0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stickyChat {
|
||||||
|
background-color: #f1f1f1 !important;
|
||||||
|
right: 0px !important;
|
||||||
|
top: 36px;
|
||||||
|
border-radius: 0px !important;
|
||||||
|
height: auto !important;
|
||||||
|
border: none !important;
|
||||||
|
border-left: 1px solid #ccc !important;
|
||||||
|
width: 185px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
.modaldialog {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
#editbar ul li {
|
||||||
|
padding: 4px 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 320px) and (max-width: 720px) {
|
||||||
|
#editbar ul li {
|
||||||
|
padding: 4px 3px;
|
||||||
|
}
|
||||||
|
#editbar ul#menu_right > li {
|
||||||
|
padding: 4px 8px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
#chaticon {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
#users {
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
#mycolorpicker {
|
||||||
|
left: -72px; /* #mycolorpicker:width - #users:width */
|
||||||
|
}
|
||||||
|
#editorcontainer {
|
||||||
|
margin-bottom: 33px;
|
||||||
|
}
|
||||||
|
#editbar ul#menu_right {
|
||||||
|
background: #f7f7f7;
|
||||||
|
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 32px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
#editbar ul#menu_right li:not(:last-child) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#editbar ul#menu_right li:last-child {
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
border: 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#chaticon {
|
||||||
|
bottom: 0;
|
||||||
|
right: 55px;
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: #f7f7f7;
|
||||||
|
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
#chatbox {
|
||||||
|
bottom: 32px;
|
||||||
|
right: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
#editbar ul li a span {
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
#usericonback {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -42,13 +42,13 @@ var chat = (function()
|
||||||
chat.show();
|
chat.show();
|
||||||
if(!isStuck || fromInitialCall) { // Stick it to
|
if(!isStuck || fromInitialCall) { // Stick it to
|
||||||
padcookie.setPref("chatAlwaysVisible", true);
|
padcookie.setPref("chatAlwaysVisible", true);
|
||||||
$('#chatbox').css({"right":"0px", "top":"36px", "border-radius":"0px", "height":"auto", "border-right":"none", "border-left":"1px solid #ccc", "border-top":"none", "background-color":"#f1f1f1", "width":"185px"});
|
$('#chatbox').addClass("stickyChat");
|
||||||
$('#chattext').css({"top":"0px"});
|
$('#chattext').css({"top":"0px"});
|
||||||
$('#editorcontainer').css({"right":"192px", "width":"auto"});
|
$('#editorcontainer').css({"right":"192px", "width":"auto"});
|
||||||
isStuck = true;
|
isStuck = true;
|
||||||
} else { // Unstick it
|
} else { // Unstick it
|
||||||
padcookie.setPref("chatAlwaysVisible", false);
|
padcookie.setPref("chatAlwaysVisible", false);
|
||||||
$('#chatbox').css({"right":"20px", "top":"auto", "border-top-left-radius":"5px", "border-top-right-radius":"5px", "border-right":"1px solid #999", "height":"200px", "border-top":"1px solid #999", "background-color":"#f7f7f7"});
|
$('#chatbox').removeClass("stickyChat");
|
||||||
$('#chattext').css({"top":"25px"});
|
$('#chattext').css({"top":"25px"});
|
||||||
$('#editorcontainer').css({"right":"0px", "width":"100%"});
|
$('#editorcontainer').css({"right":"0px", "width":"100%"});
|
||||||
isStuck = false;
|
isStuck = false;
|
||||||
|
|
Loading…
Reference in New Issue