ebd532b608
Added custom checkbox list for selecting users in group options Added buttons to invoke group options Hover on the 'more-options' (3-dot) button in the top-right corner to view group options Note : group options will only be displayed when user is either creator or admin of respective group
697 lines
10 KiB
CSS
697 lines
10 KiB
CSS
html,
|
|
body,
|
|
div,
|
|
span {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: no-repeat fixed center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.fa-2x {
|
|
font-size: 1.5em !important;
|
|
}
|
|
|
|
.app {
|
|
position: relative;
|
|
overflow: hidden;
|
|
top: 19px;
|
|
height: calc(100% - 38px);
|
|
margin: auto !important;
|
|
padding: 0 !important;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.app-one {
|
|
background-color: #f7f7f7;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.side {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.side-one {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1;
|
|
position: relative;
|
|
display: block;
|
|
top: 0;
|
|
}
|
|
|
|
.side-two {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 2;
|
|
position: relative;
|
|
top: -100%;
|
|
left: -100%;
|
|
-webkit-transition: left 0.3s ease;
|
|
transition: left 0.3s ease;
|
|
|
|
}
|
|
|
|
.heading {
|
|
padding: 10px 16px 10px 15px;
|
|
margin: 0 !important;
|
|
height: 60px;
|
|
width: 100%;
|
|
background-color: #eee;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.heading-avatar {
|
|
padding: 0 !important;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.heading-avatar-icon img {
|
|
border-radius: 50%;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
.heading-name {
|
|
padding: 0 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.heading-name-meta {
|
|
font-weight: 700;
|
|
font-size: 100%;
|
|
padding: 5px;
|
|
padding-bottom: 0;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #000;
|
|
display: block;
|
|
}
|
|
|
|
#recipient-status {
|
|
border-radius: 50%;
|
|
background: none;
|
|
height: 25px;
|
|
width: 25px;
|
|
color: white;
|
|
}
|
|
|
|
.heading-online {
|
|
display: none;
|
|
padding: 0 5px;
|
|
font-size: 12px;
|
|
color: #93918f;
|
|
}
|
|
|
|
.heading-compose {
|
|
padding: 0;
|
|
}
|
|
|
|
.heading-compose i {
|
|
text-align: center;
|
|
padding: 5px;
|
|
color: #93918f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.heading-dot {
|
|
padding: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.heading-dot i {
|
|
text-align: right;
|
|
padding: 5px;
|
|
color: #93918f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.searchBox {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 60px;
|
|
width: 100%;
|
|
}
|
|
|
|
.searchBox-inner {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 10px !important;
|
|
background-color: #fbfbfb;
|
|
}
|
|
|
|
/*#searchBox-inner input {
|
|
box-shadow: none;
|
|
}*/
|
|
|
|
.searchBox-inner input:focus {
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sideBar {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background-color: #fff;
|
|
overflow-y: auto;
|
|
border: 1px solid #f7f7f7;
|
|
height: calc(100% - 120px);
|
|
}
|
|
|
|
.sideBar-body {
|
|
position: relative;
|
|
padding: 10px !important;
|
|
border-bottom: 1px solid #f7f7f7;
|
|
height: 72px;
|
|
margin: 0 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sideBar-body:hover {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.sideBar-avatar {
|
|
text-align: center;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.avatar-icon img {
|
|
border-radius: 50%;
|
|
height: 49px;
|
|
width: 49px;
|
|
}
|
|
|
|
.sideBar-main {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.sideBar-main .row {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.sideBar-name {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.name-meta {
|
|
font-size: 100%;
|
|
padding: 1% !important;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #000;
|
|
}
|
|
|
|
.sideBar-time {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.time-meta {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
padding: 1% !important;
|
|
color: rgba(0, 0, 0, .4);
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/*New Message*/
|
|
|
|
.newMessage {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
position: relative;
|
|
left: -100%;
|
|
}
|
|
|
|
.newMessage-heading {
|
|
padding: 10px 16px 10px 15px !important;
|
|
margin: 0 !important;
|
|
height: 100px;
|
|
width: 100%;
|
|
background-color: #00bfa5;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.newMessage-main {
|
|
padding: 10px 16px 0 15px !important;
|
|
margin: 0 !important;
|
|
height: 60px;
|
|
margin-top: 30px !important;
|
|
width: 100%;
|
|
z-index: 1001;
|
|
color: #fff;
|
|
}
|
|
|
|
.newMessage-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 10px 5px !important;
|
|
}
|
|
|
|
.newMessage-back {
|
|
text-align: center;
|
|
vertical-align: baseline;
|
|
padding: 12px 5px !important;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newMessage-back i {
|
|
margin: auto !important;
|
|
}
|
|
|
|
.composeBox {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 60px;
|
|
width: 100%;
|
|
}
|
|
|
|
.composeBox-inner {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 10px !important;
|
|
background-color: #fbfbfb;
|
|
}
|
|
|
|
.composeBox-inner input:focus {
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.compose-sideBar {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background-color: #fff;
|
|
overflow-y: auto;
|
|
border: 1px solid #f7f7f7;
|
|
height: calc(100% - 160px);
|
|
}
|
|
|
|
/*Conversation*/
|
|
|
|
.conversation {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
/*width: 100%;*/
|
|
border-left: 1px solid rgba(0, 0, 0, .08);
|
|
/*overflow-y: auto;*/
|
|
}
|
|
|
|
.message {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background: no-repeat fixed center;
|
|
background-size: cover;
|
|
overflow-y: auto;
|
|
border: 1px solid #f7f7f7;
|
|
height: calc(100% - 120px);
|
|
}
|
|
|
|
.message-inner {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.message-body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.message-main-receiver {
|
|
/*padding: 10px 20px;*/
|
|
max-width: 60%;
|
|
height: auto;
|
|
}
|
|
|
|
.message-main-sender {
|
|
padding: 3px 20px !important;
|
|
margin-left: 40% !important;
|
|
max-width: 60%;
|
|
height: auto;
|
|
}
|
|
|
|
.message-text {
|
|
margin: 0 !important;
|
|
padding: 5px !important;
|
|
word-wrap: break-word;
|
|
font-weight: 200;
|
|
font-size: 14px;
|
|
padding-bottom: 0 !important;
|
|
height: auto;
|
|
}
|
|
|
|
.message-time {
|
|
margin: 0 !important;
|
|
margin-left: 50px !important;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
color: #9a9a9a;
|
|
height: auto;
|
|
}
|
|
|
|
.receiver {
|
|
float: left;
|
|
width: auto !important;
|
|
padding: 4px 10px 7px !important;
|
|
border-radius: 10px 10px 10px 0;
|
|
background: #ffffff;
|
|
font-size: 12px;
|
|
word-wrap: break-word;
|
|
display: inline-block;
|
|
height: auto;
|
|
}
|
|
|
|
.sender {
|
|
float: right;
|
|
width: auto !important;
|
|
height: auto;
|
|
background: #dcf8c6;
|
|
border-radius: 10px 10px 0 10px;
|
|
padding: 4px 10px 7px !important;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/*Reply*/
|
|
|
|
.reply {
|
|
height: 60px;
|
|
width: 100%;
|
|
background-color: #f5f1ee;
|
|
padding: 10px 5px 10px 5px !important;
|
|
margin: 0 !important;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.reply-emojis {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.reply-emojis i {
|
|
text-align: center;
|
|
padding: 5px 5px 5px 5px !important;
|
|
color: #93918f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply-recording {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.reply-recording i {
|
|
text-align: center;
|
|
padding: 5px !important;
|
|
color: #93918f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply-send {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.reply-send i {
|
|
text-align: center;
|
|
padding: 5px !important;
|
|
color: #93918f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reply-main {
|
|
padding: 2px 5px !important;
|
|
}
|
|
|
|
.reply-main input {
|
|
width: 100%;
|
|
resize: none;
|
|
overflow: hidden;
|
|
padding: 5px !important;
|
|
outline: none;
|
|
border: none;
|
|
text-indent: 5px;
|
|
box-shadow: none;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.reply-main input:focus {
|
|
outline: none;
|
|
border: none;
|
|
text-indent: 5px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.app {
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.heading {
|
|
height: 70px;
|
|
background-color: #009688;
|
|
}
|
|
|
|
.fa-2x {
|
|
font-size: 2.3em !important;
|
|
}
|
|
|
|
.heading-avatar {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.heading-avatar-icon img {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.heading-compose {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.heading-compose i {
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.heading-dot {
|
|
padding: 5px !important;
|
|
margin-left: 10px !important;
|
|
}
|
|
|
|
.heading-dot i {
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sideBar {
|
|
height: calc(100% - 130px);
|
|
}
|
|
|
|
.sideBar-body {
|
|
height: 80px;
|
|
}
|
|
|
|
.sideBar-avatar {
|
|
text-align: left;
|
|
padding: 0 8px !important;
|
|
}
|
|
|
|
.avatar-icon img {
|
|
height: 55px;
|
|
width: 55px;
|
|
}
|
|
|
|
.sideBar-main {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.sideBar-main .row {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.sideBar-name {
|
|
padding: 10px 5px !important;
|
|
}
|
|
|
|
.name-meta {
|
|
font-size: 16px;
|
|
padding: 5% !important;
|
|
}
|
|
|
|
.sideBar-time {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.time-meta {
|
|
text-align: right;
|
|
font-size: 14px;
|
|
padding: 4% !important;
|
|
color: rgba(0, 0, 0, .4);
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/*Conversation*/
|
|
.conversation {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
/*width: 100%;*/
|
|
border-left: 1px solid rgba(0, 0, 0, .08);
|
|
/*overflow-y: auto;*/
|
|
}
|
|
|
|
.message {
|
|
height: calc(100% - 140px);
|
|
}
|
|
|
|
.reply {
|
|
height: 70px;
|
|
}
|
|
|
|
.reply-emojis {
|
|
padding: 5px 0 !important;
|
|
}
|
|
|
|
.reply-emojis i {
|
|
padding: 5px 2px !important;
|
|
font-size: 1.8em !important;
|
|
}
|
|
|
|
.reply-main {
|
|
padding: 2px 8px !important;
|
|
}
|
|
|
|
.reply-main input {
|
|
padding: 8px !important;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.reply-recording {
|
|
padding: 5px 0 !important;
|
|
}
|
|
|
|
.reply-recording i {
|
|
padding: 5px 0 !important;
|
|
font-size: 1.8em !important;
|
|
}
|
|
|
|
.reply-send {
|
|
padding: 5px 0 !important;
|
|
}
|
|
|
|
.reply-send i {
|
|
padding: 5px 2px 5px 0 !important;
|
|
font-size: 1.8em !important;
|
|
}
|
|
}
|
|
|
|
.badgebox {
|
|
opacity: 0;
|
|
}
|
|
|
|
.badgebox+.badge {
|
|
height: 14px;
|
|
width: 20px;
|
|
font-size: 0px;
|
|
padding: 2px;
|
|
float: right;
|
|
}
|
|
|
|
.badgebox:focus+.badge {
|
|
box-shadow: inset 0px 0px 3px;
|
|
}
|
|
|
|
.badgebox:checked+.badge {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.listLabel {
|
|
margin: 5px;
|
|
text-align: left;
|
|
line-height: 50%;
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
|
|
#overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 2;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
display: none;
|
|
}
|
|
|
|
.userChecklist-container {
|
|
margin-top: 25px;
|
|
width: 300px;
|
|
height: 400px;
|
|
background-color: #eee;
|
|
display: inline-block;
|
|
}
|
|
|
|
#userChecklist {
|
|
height: 275px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
min-width: 150px;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
margin-left: -75px;
|
|
}
|
|
|
|
.dropdown-content li {
|
|
color: rgb(95, 95, 95);
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: right;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.dropdown-content li:hover {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
#groupOptions {
|
|
display: none;
|
|
} |