210 lines
5.3 KiB
SCSS
210 lines
5.3 KiB
SCSS
#conversejs {
|
|
|
|
.send-button {
|
|
border-radius: 0;
|
|
bottom: var(--send-button-bottom);
|
|
color: var(--inverse-link-color);
|
|
}
|
|
|
|
.chatbox {
|
|
.send-button {
|
|
background-color: var(--chat-head-color);
|
|
}
|
|
}
|
|
|
|
.chatroom {
|
|
.send-button {
|
|
background-color: var(--muc-toolbar-btn-color);
|
|
}
|
|
}
|
|
|
|
.chat-toolbar {
|
|
|
|
.toolbar-buttons {
|
|
width: 100%;
|
|
display: inline-block;
|
|
|
|
.message-limit {
|
|
padding: 0.5em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.unverified a,
|
|
.unverified {
|
|
color: #cf5300;
|
|
}
|
|
.private a,
|
|
.private {
|
|
color: #4b7003;
|
|
}
|
|
li {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
list-style: none;
|
|
padding: 0 0.5em;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
.toolbar-menu {
|
|
background-color: #fff;
|
|
bottom: 1.7rem;
|
|
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
|
height: auto;
|
|
margin-bottom: 0;
|
|
min-width: 21rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: auto;
|
|
z-index: $zindex-dropdown;
|
|
|
|
&.otr-menu {
|
|
left: -6em;
|
|
min-width: 15rem;
|
|
|
|
&.show {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
}
|
|
&.toggle-otr {
|
|
ul {
|
|
z-index: 99;
|
|
li {
|
|
&:hover {
|
|
background-color: var(--highlight-color);
|
|
}
|
|
display: block;
|
|
padding: 7px;
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
converse-chat-toolbar {
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
.fa, .fa:hover,
|
|
.far, .far:hover,
|
|
.fas, .fas:hover {
|
|
color: var(--chat-head-color);
|
|
font-size: var(--font-size-large);
|
|
svg {
|
|
fill: var(--chat-head-color);
|
|
}
|
|
}
|
|
.unencrypted a,
|
|
.unencrypted {
|
|
color: var(--text-color);
|
|
.toolbar-menu {
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
margin-top: 0.4em;
|
|
border: 1px transparent solid;
|
|
background-color: transparent;
|
|
|
|
&.send-button {
|
|
padding-top: 0.2em;
|
|
padding-bottom: 0.2em;
|
|
margin: 0;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chatbox {
|
|
converse-chat-toolbar {
|
|
border-top: var(--chatbox-message-input-border-top);
|
|
color: var(--chat-toolbar-btn-color);
|
|
background-color: white;
|
|
.fas, .fas:hover,
|
|
.far, .far:hover,
|
|
.fa, .fa:hover {
|
|
color: var(--chat-toolbar-btn-color);
|
|
}
|
|
button {
|
|
&:focus {
|
|
outline-color: var(--chat-toolbar-btn-color) !important;
|
|
}
|
|
&:disabled .fa {
|
|
color: var(--chat-toolbar-btn-disabled-color);
|
|
&:hover {
|
|
color: var(--chat-toolbar-btn-disabled-color);
|
|
}
|
|
svg, svg:hover {
|
|
fill: var(--chat-toolbar-btn-disabled-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chatroom {
|
|
converse-chat-toolbar {
|
|
border-top: var(--chatroom-message-input-border-top);
|
|
color: var(--muc-toolbar-btn-color);
|
|
.fas, .fas:hover,
|
|
.far, .far:hover,
|
|
.fa, .fa:hover {
|
|
color: var(--muc-toolbar-btn-color);
|
|
font-size: var(--font-size-large);
|
|
svg {
|
|
fill: var(--muc-toolbar-btn-color);
|
|
}
|
|
}
|
|
button {
|
|
&:focus {
|
|
outline-color: var(--muc-toolbar-btn-color) !important;
|
|
}
|
|
&:disabled .fa {
|
|
color: var(--muc-toolbar-btn-disabled-color);
|
|
&:hover {
|
|
color: var(--muc-toolbar-btn-disabled-color);
|
|
}
|
|
svg, svg:hover {
|
|
fill: var(--muc-toolbar-btn-disabled-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#conversejs.converse-overlayed {
|
|
.chat-toolbar {
|
|
li {
|
|
.toolbar-menu {
|
|
min-width: 235px;
|
|
}
|
|
}
|
|
}
|
|
.chatroom {
|
|
.chat-toolbar {
|
|
li {
|
|
.toolbar-menu {
|
|
min-width: 280px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|