668 lines
15 KiB
CSS
668 lines
15 KiB
CSS
/* Timebank customizations for messenger package */
|
|
|
|
|
|
/* Friends dropdown navigation bar */
|
|
|
|
#messenger-style-overrides #click_friends_tab {
|
|
padding: 0;
|
|
}
|
|
|
|
#messenger-style-overrides #click_friends_tab {
|
|
color: initial;
|
|
}
|
|
|
|
#messenger-style-overrides #click_friends_tab:hover {
|
|
color: initial;
|
|
}
|
|
|
|
#messenger-style-overrides #click_friends_tab:hover {
|
|
text-decoration: initial;
|
|
}
|
|
|
|
#messenger-style-overrides #nav-friend-tabs {
|
|
margin: 4px 20px 0px 20px;
|
|
}
|
|
|
|
#messenger-style-overrides .nav-pills .nav-link.active,
|
|
.nav-pills .show>.nav-link {
|
|
background-color: #1f2937;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .nav-pills .nav-link.active,
|
|
.nav-pills .show>.nav-link:hover {
|
|
background-color: #1f2937;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .pill-tab-nav>.nav-pills>a.active:hover {
|
|
background-color: #1f2937;
|
|
color: #fff !important;
|
|
}
|
|
|
|
#messenger-style-overrides .pill-tab-nav>.nav-pills>a:hover {
|
|
background-color: #e2e6ea;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
#messenger-style-overrides .pill-tab-nav>.nav-pills>a {
|
|
background-color: #f8f9fa;
|
|
color: #000;
|
|
border: 1px #dee2e6 solid;
|
|
}
|
|
|
|
|
|
/* Set messenger container to match space viewport */
|
|
|
|
#messenger-style-overrides .py-12 {
|
|
padding-top: 3rem;
|
|
padding-bottom: 0rem;
|
|
}
|
|
|
|
|
|
#messenger-style-overrides #thread_header_area {
|
|
position: initial;
|
|
}
|
|
|
|
#messenger-style-overrides .card-header {
|
|
|
|
padding: 1rem 0.4rem;
|
|
}
|
|
|
|
#messenger-style-overrides .chat-body {
|
|
max-height: calc(75vh - 195px);
|
|
margin: 0px 0px 10px 0px;
|
|
padding: 10px 10px 10px;
|
|
scrollbar-width: revert;
|
|
}
|
|
|
|
#messenger-style-overrides #messenger_container {
|
|
height: 75vh;
|
|
overflow: scroll;
|
|
}
|
|
|
|
#messenger-style-overrides #chat-footer {
|
|
position: initial;
|
|
}
|
|
|
|
#messenger-style-overrides #chat-footer .chat-footer {
|
|
position: relative;
|
|
width: 100%;
|
|
bottom: 10px;
|
|
}
|
|
|
|
#messenger-style-overrides .form-inline {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-flow: column-reverse;
|
|
}
|
|
|
|
/* Side-bar avatars and threads */
|
|
#messenger-style-overrides .avatar-is-offline {
|
|
box-shadow: 0px 0px 0px 2px #dee2e6;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides .avatar-is-away {
|
|
box-shadow: 0px 0px 0px 2px #38bdf8;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides .avatar-is-online {
|
|
box-shadow: 0px 0px 0px 2px #38c172;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides .input-group {
|
|
position: initial;
|
|
}
|
|
|
|
#messenger-style-overrides .messages-panel.card {
|
|
border: none;
|
|
}
|
|
|
|
#messenger-style-overrides .alert-warning {
|
|
background: #1f2937;
|
|
border-color: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .thread_list_item.alert-warning:hover {
|
|
background: #494d50 !important;
|
|
border-color: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .thread_list_item.alert-warning.shadow-sm.rounded a {
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .alert-info {
|
|
background: #fff;
|
|
border: 0px solid #dfdfdf;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
#messenger-style-overrides #messages_ul .thread_list_item.alert-warning.shadow-sm.rounded.alert-info {
|
|
background: #1f2937;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li {
|
|
background: #e9ecef;
|
|
border: 0px solid #dfdfdf;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li[class*="alert-"] {
|
|
background: dimgrey;
|
|
border: 1px solid #black;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li:hover {
|
|
color: #fff !important;
|
|
background: #444;
|
|
border: 0px solid #dfdfdf;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li[class*="alert-"] a {
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li a {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
#messenger-style-overrides .inbox ul.messages-list li:hover a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
#messenger-style-overrides .shadow-sm.badge.badge-pill.badge-primary {
|
|
background: #e3342f;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Message container header and buttons */
|
|
#messenger-style-overrides #messenger_container .bg-light {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn.text-danger {
|
|
color: #212529 !important;
|
|
}
|
|
|
|
#messenger-style-overrides #messenger_container .btn {
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
#messenger-style-overrides .btn-lg {
|
|
/* height: 0rem; */
|
|
min-height: 3.5rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
font-size: 1.125rem;
|
|
min-width: 3.5rem;
|
|
}
|
|
|
|
#messenger-style-overrides .btn {
|
|
/* height: 0rem; */
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
}
|
|
|
|
#messenger-style-overrides .badge-info {
|
|
background-color: #d7d9da;
|
|
color: #1f2937;
|
|
}
|
|
|
|
#messenger-style-overrides .badge-primary {
|
|
background-color: #d7d9da;
|
|
}
|
|
|
|
#messenger-style-overrides .spinner-grow {
|
|
background-color: #d7d9da;
|
|
}
|
|
|
|
/* Change Font Awesome icons for better user experience */
|
|
#messenger-style-overrides .fa-2x {
|
|
font-size: 1em;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
#messenger-style-overrides .fas.fa-cog::before {
|
|
content: "\f0c9" !important;
|
|
}
|
|
|
|
/* Bars (Hamburger menu) */
|
|
#messenger-style-overrides .fas.fa-cogs::before {
|
|
content: "\f0c9" !important;
|
|
}
|
|
|
|
/* Comment dots (Conversation menu) */
|
|
#messenger-style-overrides .fas.fa-hourglass::before {
|
|
content: "\f252" !important;
|
|
}
|
|
|
|
/* Hourglass halfway */
|
|
#messenger-style-overrides .container .fas.fa-edit::before {
|
|
content: "\f0c0" !important;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Three profiles (New group conversation) */
|
|
#messenger-style-overrides .container .fas.fa-user-friends::before {
|
|
content: "\f4fc" !important;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Profile with check sign (Friends) */
|
|
#messenger-style-overrides .container .fas.fa-cog::before {
|
|
content: "\f0ad" !important;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Wrench (Settings) */
|
|
#messenger-style-overrides #click_friends_tab .fa-ban::before {
|
|
content: "\f057" !important;
|
|
}
|
|
|
|
/* Circle with x -sign */
|
|
#messenger-style-overrides #pending_friends_nav .fa-ban::before {
|
|
content: "\f057" !important;
|
|
}
|
|
|
|
/* Circle with x -sign */
|
|
|
|
/* Message bodies */
|
|
#messenger-style-overrides .fa-clock {
|
|
display: none;
|
|
}
|
|
|
|
#messenger-style-overrides .message-body .message-text {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#messenger-style-overrides .message-body .message-text {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#messenger-style-overrides .message .message-body {
|
|
border-radius: 6px;
|
|
margin: 5px 5px 5px 5px;
|
|
}
|
|
|
|
/* Left messages (others) */
|
|
|
|
#messenger-style-overrides .timeago {
|
|
color: white;
|
|
}
|
|
|
|
#messenger-style-overrides .message.info .message-info>h4 {
|
|
color: white;
|
|
}
|
|
|
|
#messenger-style-overrides .message .message-body a {
|
|
color: white;
|
|
}
|
|
|
|
#messenger-style-overrides .message.info .message-body {
|
|
color: #fff !important;
|
|
background: dimgrey;
|
|
border-color: black;
|
|
}
|
|
|
|
messenger-style-overrides .message hr {
|
|
display: none;
|
|
}
|
|
|
|
/* Right messages (self) */
|
|
#messenger-style-overrides .my-message .message-body {
|
|
color: white;
|
|
background: black;
|
|
border-color: black;
|
|
}
|
|
|
|
#messenger-style-overrides .my-message .timeago {
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides ul.messages-list li .timeago {
|
|
color: #3d3f42;
|
|
}
|
|
|
|
#messenger-style-overrides ul.messages-list li:hover .timeago {
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides .thread_list_item.alert-warning.shadow-sm.rounded a .timeago {
|
|
color: white;
|
|
}
|
|
|
|
#messenger-style-overrides .my-message a {
|
|
color: #fff;
|
|
background: black;
|
|
}
|
|
|
|
#messenger-style-overrides .my-message a:hover {
|
|
color: #d7d9da;
|
|
background: #808080;
|
|
}
|
|
|
|
#messenger-style-overrides .message.my-message::after {
|
|
display: none;
|
|
}
|
|
|
|
/* Message reactions */
|
|
#messenger-style-overrides #message_container .message-reactions .reactions-body .reacted-by-me {
|
|
box-shadow: 0 0 0px 1px #dee2e6
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .message-reactions .text-primary {
|
|
color: #d7d9da !important
|
|
}
|
|
|
|
/* Hide Record Audio Message Button */
|
|
#messenger-style-overrides #record_audio_message_btn {
|
|
display: none;
|
|
}
|
|
|
|
/* Message container avatars */
|
|
#messenger-style-overrides #thread_header_area .large-image {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
#messenger-style-overrides img.bobble-image {
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
#messenger-style-overrides img.main-bobble-offline {
|
|
box-shadow: 0px 0px 0px 2px #dee2e6;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides img.main-bobble-away {
|
|
box-shadow: 0px 0px 0px 2px #38bdf8;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides img.main-bobble-online {
|
|
box-shadow: 0px 0px 0px 2px #38c172;
|
|
padding: 1px
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .message-avatar {
|
|
display: none
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .message::before {
|
|
border: 0px;
|
|
}
|
|
|
|
/* Message footer and input field */
|
|
#messenger-style-overrides .form-control:focus {
|
|
border-color: #1f2937;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(194, 194, 194, 0.25);
|
|
}
|
|
|
|
#messenger-style-overrides .messages-panel .chat-footer .card.bg-light.mb-0.border-0 {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
|
|
/* Modals like editing a message */
|
|
#messenger-style-overrides .bg-gradient-dark {
|
|
background: #fff !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
#messenger-style-overrides .bg-gradient-primary {
|
|
background: #fff !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
#messenger-style-overrides .bg-gradient-danger {
|
|
background: #fff !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
#messenger-style-overrides #body_modal .bg-light {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
#messenger-style-overrides #body_modal .shadow-sm {
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-success:focus,
|
|
.btn-outline-success:focus {
|
|
background: #e2e6ea linear-gradient(180deg, #e5e9ed, #e2e6ea) repeat-x;
|
|
border-color: #dae0e5;
|
|
color: #212529;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-success:hover,
|
|
.btn-outline-success:hover {
|
|
background: #e2e6ea linear-gradient(180deg, #e5e9ed, #e2e6ea) repeat-x;
|
|
border-color: #dae0e5;
|
|
color: #212529;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-success,
|
|
.btn-outline-success {
|
|
background: #f8f9fa linear-gradient(180deg, #f8f9fa, #f8f9fa) repeat-x;
|
|
border-color: #f8f9fa;
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
|
color: #212529;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-primary:focus,
|
|
.btn-outline-primary:focus,
|
|
.btn-info:focus,
|
|
.btn-outline-info:focus,
|
|
.btn-dark:focus,
|
|
.btn-outline-dark:focus {
|
|
background: #e2e6ea linear-gradient(180deg, #e5e9ed, #e2e6ea) repeat-x !important;
|
|
border-color: #dae0e5;
|
|
color: #212529;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-primary:active,
|
|
.btn-outline-primary:active,
|
|
.btn-info:active,
|
|
.btn-outline-info:active,
|
|
.btn-dark:active,
|
|
.btn-outline-dark:active {
|
|
background: #e2e6ea linear-gradient(180deg, #e5e9ed, #e2e6ea) repeat-x;
|
|
border-color: #dae0e5;
|
|
color: #212529;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-primary:hover,
|
|
.btn-outline-primary:hover,
|
|
.btn-info:hover,
|
|
.btn-outline-info:hover,
|
|
.btn-dark:hover,
|
|
.btn-outline-dark:hover {
|
|
background: #e2e6ea linear-gradient(180deg, #e5e9ed, #e2e6ea) repeat-x !important;
|
|
border-color: #dae0e5;
|
|
color: #212529;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .btn-primary,
|
|
.btn-outline-primary,
|
|
.btn-info,
|
|
.btn-outline-info,
|
|
.btn-dark,
|
|
.btn-outline-dark {
|
|
background: #f8f9fa linear-gradient(180deg, #f8f9fa, #f8f9fa) repeat-x;
|
|
border-color: #f8f9fa;
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
|
color: #212529;
|
|
}
|
|
|
|
|
|
#messenger-style-overrides .btn-light {
|
|
background: white;
|
|
border-color: #333;
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
|
color: #212529;
|
|
border-width: 1px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
#messenger-style-overrides .btn-light:hover {
|
|
background: #e5e5e5;
|
|
border-color: black;
|
|
color: black;
|
|
}
|
|
|
|
#messenger-style-overrides .btn-light:focus {
|
|
border-color: black;
|
|
border-width: 2px;
|
|
color: black;
|
|
}
|
|
|
|
#messenger-style-overrides #message_container .bg-warning,
|
|
.bg-outline-warning {
|
|
background: #fff !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
|
|
|
|
#messenger-style-overrides .bg-warning,
|
|
.bg-outline-warning {
|
|
background: #fff !important;
|
|
color: #1f2937 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Settings modal*/
|
|
|
|
#messenger-style-overrides .modal {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
|
|
#messenger-style-overrides .switch input:checked+label::before {
|
|
background-color: #333;
|
|
}
|
|
|
|
#messenger-style-overrides .switch input:focus+label::before {
|
|
box-shadow: 0 0 0 .15rem #999;
|
|
outline: none;
|
|
}
|
|
|
|
#messenger-style-overrides #online_status_switch .glowing_btn {
|
|
animation: none;
|
|
}
|
|
|
|
#messenger-style-overrides #online_status_switch .btn-success {
|
|
background: #38c172;
|
|
border-color: #808080;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides #online_status_switch .btn-danger {
|
|
background: #333333;
|
|
border-color: #808080;
|
|
color: #fff;
|
|
}
|
|
|
|
#messenger-style-overrides #online_status_switch.btn-secondary {
|
|
background: #dee2e6;
|
|
border-color: #808080;
|
|
color: #d7d9da;
|
|
}
|
|
|
|
#messenger-style-overrides #online_status_switch .btn:not(:disabled):not(.disabled).active {
|
|
box-shadow: inset 0px 6px 0px rgb(255, 255, 255);
|
|
}
|
|
|
|
#messenger-style-overrides .modal-footer .btn-success:focus,
|
|
.btn-outline-success:focus {
|
|
border-color: black;
|
|
border-width: 2px;
|
|
color: black;
|
|
}
|
|
|
|
#messenger-style-overrides .modal-footer .btn-success:hover,
|
|
.btn-outline-success:hover {
|
|
background: #e5e5e5;
|
|
border-color: black;
|
|
color: black;
|
|
}
|
|
|
|
#messenger-style-overrides .modal-footer .btn-success,
|
|
.btn-outline-success {
|
|
background: white;
|
|
border-color: black;
|
|
border-width: 1px;
|
|
border-radius: 8px;
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
|
color: black;
|
|
}
|
|
|
|
#messenger-style-overrides #body_modal div.col-6:nth-child(2) {
|
|
display: none;
|
|
}
|
|
|
|
/* Remove avatar change and remove options */
|
|
#messenger-style-overrides #main_modal span.h5:nth-child(1)>i:nth-child(1) {
|
|
display: none;
|
|
}
|
|
|
|
/* Remove modal title bar icon */
|
|
|
|
/* Overall Messenger styles */
|
|
#messenger-style-overrides .text-info {
|
|
color: #1f2937 !important
|
|
/* display: none; */
|
|
}
|
|
|
|
/* #messenger-style-overrides b,
|
|
#messenger-style-overrides strong {
|
|
font-weight: lighter;
|
|
} */
|
|
|
|
#messenger-style-overrides .badge {
|
|
font-weight: 500;
|
|
}
|
|
|
|
#messenger-style-overrides .text-success {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
/* Toast Notifications */
|
|
#messenger-style-overrides .toast-info {
|
|
background-color: #1f2937;
|
|
}
|
|
|
|
#messenger-style-overrides .toast-warning {
|
|
background-color: #808080;
|
|
}
|
|
|
|
#messenger-style-overrides .toast-error {
|
|
background-color: #e3342f;
|
|
}
|
|
|
|
#messenger-style-overrides .toast-error {
|
|
background-color: #e3342f;
|
|
}
|
|
|
|
#messenger-style-overrides .toast-success {
|
|
background-color: #ffff;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
.list-inline {
|
|
padding-left: 10px;
|
|
/* Your custom padding */
|
|
list-style: disc;
|
|
/* Your custom list style */
|
|
} |