392 lines
No EOL
10 KiB
Text
392 lines
No EOL
10 KiB
Text
// Author - Achilles Rasquinha <achilles@frappe.io>
|
|
|
|
// http://codeguide.co - @mdo (Author of Bootstrap)
|
|
|
|
@import "common.less";
|
|
|
|
// Typography
|
|
@font-weight-bold: 700;
|
|
@font-weight-heavy: 900;
|
|
|
|
@frappe-chat-toggle-height: 40px;
|
|
|
|
@frappe-chat-popper-margin: 15px;
|
|
@frappe-chat-popper-panel-width: 350px;
|
|
@frappe-chat-popper-panel-height: 500px;
|
|
// z-index greater than FAB, lesser than modal.
|
|
@frappe-chat-popper-z-index: 1035;
|
|
|
|
// BS modal's box-shadow
|
|
@frappe-chat-popper-panel-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
|
|
|
// https://github.com/twbs/bootstrap/blob/v3.3.7/less/variables.less#L278
|
|
// Keep z-index of the ChatPopper higher than others, lower than modal background.
|
|
|
|
@frappe-chat-room-list-content-max-width: 180px;
|
|
|
|
@frappe-chat-form-font-size: 12px;
|
|
@frappe-chat-form-menu-border-radius: 4px;
|
|
@frappe-chat-form-list-group-height: 150px; // Hints
|
|
|
|
// Typography
|
|
.font-bold { font-weight: @font-weight-bold; }
|
|
.font-heavy { font-weight: @font-weight-heavy; }
|
|
|
|
// Utilities
|
|
.cursor-pointer { cursor: pointer; }
|
|
|
|
// Hacks and Fixes
|
|
// suggested by rushabh@frappe.io. Thanks, Rushabh!
|
|
.avatar { padding: 2px; }
|
|
|
|
.navbar
|
|
{
|
|
.frappe-chat-toggle
|
|
{
|
|
height: @frappe-chat-toggle-height;
|
|
text-align: center;
|
|
}
|
|
|
|
.octicon { margin-top: 5px; } // Hack, somewhat.
|
|
}
|
|
|
|
.frappe-chat
|
|
{
|
|
& > .frappe-chat-popper
|
|
{
|
|
position: fixed;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
margin: @frappe-chat-popper-margin;
|
|
z-index: @frappe-chat-popper-z-index;
|
|
|
|
& > .frappe-chat-popper-collapse
|
|
{
|
|
& > .panel
|
|
{
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: @frappe-chat-popper-panel-width;
|
|
height: @frappe-chat-popper-panel-height;
|
|
box-shadow: @frappe-chat-popper-panel-box-shadow;
|
|
|
|
.vcenter
|
|
{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.panel-heading
|
|
{
|
|
.frappe-chat-action-bar
|
|
{
|
|
form
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-action
|
|
{
|
|
margin-left: 5px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.frappe-chat-room-list
|
|
{
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 0 1px 0 1px;
|
|
|
|
& > li > a
|
|
{
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
.media
|
|
{
|
|
.media-heading, .media-subtitle
|
|
{
|
|
.ellipsis;
|
|
max-width: @frappe-chat-room-list-content-max-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .panel.panel-span
|
|
{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
overflow: auto;
|
|
border-radius: 0px;
|
|
|
|
.panel-heading
|
|
{
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel
|
|
{
|
|
margin-bottom: 0px !important;
|
|
|
|
.chat-form
|
|
{
|
|
.form-control
|
|
{
|
|
font-size: @frappe-chat-form-font-size;
|
|
}
|
|
|
|
.dropdown-menu
|
|
{
|
|
border-radius: @frappe-chat-form-menu-border-radius;
|
|
}
|
|
|
|
// Hints
|
|
.hint-list.list-group
|
|
{
|
|
margin: 0px;
|
|
max-height: @frappe-chat-form-list-group-height;
|
|
overflow-y: auto;
|
|
|
|
.hint-list-item.list-group-item:first-child, .hint-list-item.list-group-item:last-child
|
|
{
|
|
border-radius: 0px !important;
|
|
|
|
a { text-decoration: none }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@frappe-chat-color-grey: #8D99A6;
|
|
|
|
@frappe-chat-base-font-size: 12px;
|
|
@frappe-chat-base-font-size-lg: 14px;
|
|
|
|
@frappe-chat-base-spacing: 5px;
|
|
|
|
// ChatForm
|
|
@frappe-chat-form-border: 1px solid #D1D8DD;
|
|
|
|
// ChatList
|
|
@frappe-chat-list-bg-color: #FAFBFC;
|
|
|
|
// ChatList.Item
|
|
@frappe-chat-list-item-padding: @frappe-chat-base-spacing @frappe-chat-base-spacing * 2;
|
|
|
|
// ChatBubble
|
|
@frappe-chat-bubble-padding: @frappe-chat-base-spacing @frappe-chat-base-spacing * 2;
|
|
@frappe-chat-bubble-min-width: 20%;
|
|
@frappe-chat-bubble-max-width: 75%;
|
|
|
|
@frappe-chat-bubble-box-shadow: 0px 0.1px 0.5px 0px rgba(0,0,0,0.5);
|
|
|
|
@frappe-chat-bubble-border-size: 1px;
|
|
@frappe-chat-bubble-border-radius: @frappe-chat-base-spacing;
|
|
|
|
@frappe-chat-bubble-l-color: #EBEFF2;
|
|
@frappe-chat-bubble-r-color: #EBF7CF;
|
|
|
|
@frappe-chat-bubble-l-groupable-margin-left: 40px;
|
|
|
|
@frappe-chat-bubble-author-font-size: @frappe-chat-base-font-size;
|
|
|
|
@frappe-chat-bubble-content-margin-bottom: @frappe-chat-base-spacing;
|
|
|
|
@frappe-chat-bubble-meta-font-size: @frappe-chat-base-spacing * 2;
|
|
|
|
@frappe-chat-bubble-check-font-size: @frappe-chat-base-font-size;
|
|
|
|
.frappe-chat-popper-collapse
|
|
{
|
|
& > .panel
|
|
{
|
|
& > .panel-heading
|
|
{
|
|
padding: @frappe-chat-base-spacing @frappe-chat-base-spacing * 2;
|
|
|
|
.btn-back
|
|
{
|
|
margin-right: @frappe-chat-base-spacing;
|
|
}
|
|
|
|
.avatar
|
|
{
|
|
width: 32px; height: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.chat-room-footer
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
|
|
.chat-form
|
|
{
|
|
border-top: @frappe-chat-form-border;
|
|
|
|
.input-group-btn
|
|
{
|
|
.btn
|
|
{
|
|
background: white;
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.form-control
|
|
{
|
|
line-height: 27px; // HACK: Makes input and placeholder centered within textarea. Also takes care of the input-btn
|
|
border: none;
|
|
box-shadow: none;
|
|
resize: none;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.fa
|
|
{
|
|
font-size: @frappe-chat-base-font-size-lg;
|
|
transition: color 0.5s; // Change, with grace. :)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.chat-list
|
|
{
|
|
padding-bottom: 50px;
|
|
height: 100%;
|
|
background: @frappe-chat-list-bg-color;
|
|
background-size: 350px 500px;
|
|
background-image: url(/assets/frappe/images/chat/wallpaper-default.jpg);
|
|
overflow-y: scroll;
|
|
|
|
.chat-list-item
|
|
{
|
|
.avatar
|
|
{
|
|
vertical-align: top;
|
|
}
|
|
|
|
.cursor-pointer;
|
|
|
|
border: none !important;
|
|
padding: @frappe-chat-list-item-padding;
|
|
background: transparent;
|
|
|
|
.chat-bubble
|
|
{
|
|
min-width: @frappe-chat-bubble-min-width;
|
|
max-width: @frappe-chat-bubble-max-width;
|
|
display: inline-block;
|
|
padding: @frappe-chat-bubble-padding;
|
|
border-radius: @frappe-chat-bubble-border-radius;
|
|
|
|
-webkit-box-shadow: @frappe-chat-bubble-box-shadow;
|
|
-moz-box-shadow: @frappe-chat-bubble-box-shadow;
|
|
box-shadow: @frappe-chat-bubble-box-shadow;
|
|
|
|
&.chat-bubble-l
|
|
{
|
|
&.chat-groupable
|
|
{
|
|
margin-left: @frappe-chat-bubble-l-groupable-margin-left;
|
|
}
|
|
|
|
// background-color: @frappe-chat-bubble-l-color;
|
|
background-color: white;
|
|
|
|
.chat-bubble-meta
|
|
{
|
|
& > .chat-bubble-creation, & > .chat-bubble-check i
|
|
{
|
|
color: darken(@frappe-chat-bubble-l-color, 50%) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.chat-bubble-r
|
|
{
|
|
text-align: right;
|
|
background-color: @frappe-chat-bubble-r-color;
|
|
|
|
.chat-bubble-meta
|
|
{
|
|
& > .chat-bubble-creation, & > .chat-bubble-check i
|
|
{
|
|
color: darken(@frappe-chat-bubble-r-color, 50%) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-bubble-author
|
|
{
|
|
font-size: @frappe-chat-bubble-author-font-size;
|
|
|
|
a
|
|
{
|
|
.font-bold;
|
|
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
.chat-bubble-content
|
|
{
|
|
margin-bottom: @frappe-chat-bubble-content-margin-bottom;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.chat-bubble-meta
|
|
{
|
|
font-size: @frappe-chat-bubble-meta-font-size;
|
|
|
|
& > .chat-bubble-check
|
|
{
|
|
margin-left: @frappe-chat-base-spacing;
|
|
|
|
i
|
|
{
|
|
font-size: @frappe-chat-bubble-check-font-size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-list-notification
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
.chat-list-notification-content
|
|
{
|
|
color: white;
|
|
background-color: #8D99A6;
|
|
display: inline-block;
|
|
/* padding: 5px; */
|
|
border-radius: 20px;
|
|
opacity: 0.5;
|
|
font-size: 10px;
|
|
padding: 5px;
|
|
// background-color: white;
|
|
} |