Various CSS fixes and use converse-icon
for nav button
This commit is contained in:
parent
1c8085f00e
commit
bbef09346a
@ -68,7 +68,7 @@
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far {
|
||||
color: white;
|
||||
color: var(--chat-head-text-color);;
|
||||
&.button-on:before {
|
||||
padding: 0.2em;
|
||||
background-color: var(--chat-head-text-color);
|
||||
|
@ -223,16 +223,14 @@
|
||||
converse-chats.converse-mobile,
|
||||
converse-chats.converse-overlayed,
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chat-head {
|
||||
converse-controlbox-navback {
|
||||
margin: auto 0;
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: var(--chat-head-text-color);
|
||||
}
|
||||
svg {
|
||||
fill: var(--chat-head-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -326,7 +326,6 @@
|
||||
|
||||
.controlbox-panes {
|
||||
background-color: var(--controlbox-pane-background-color);
|
||||
border-right: 0.2rem solid var(--panel-divider-color);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -471,10 +470,6 @@
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.controlbox-panes {
|
||||
border-radius: var(--chatbox-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-heading {
|
||||
@ -497,6 +492,9 @@
|
||||
|
||||
&.converse-embedded,
|
||||
&.converse-fullscreen{
|
||||
.controlbox-panes {
|
||||
border-right: 0.2rem solid var(--panel-divider-color);
|
||||
}
|
||||
.toggle-controlbox {
|
||||
display: none;
|
||||
}
|
||||
|
@ -2,5 +2,5 @@ import { html } from "lit";
|
||||
import { navigateToControlBox } from '../utils.js';
|
||||
|
||||
export default (jid) => {
|
||||
return html`<i class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></i>`
|
||||
return html`<converse-icon size="1em" class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></converse-icon>`
|
||||
}
|
||||
|
@ -23,7 +23,7 @@
|
||||
#toggle-minimized-chats {
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
background-color: var(--link-color);
|
||||
background-color: var(--subdued-color);
|
||||
padding: 1em 0 0 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
@ -1,6 +1,15 @@
|
||||
.conversejs {
|
||||
converse-muc.chatroom {
|
||||
.chat-head-chatroom {
|
||||
|
||||
converse-controlbox-navback {
|
||||
.fa-arrow-left {
|
||||
svg {
|
||||
fill: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color: var(--chatroom-head-color);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
border-bottom: var(--chatroom-head-border-bottom);
|
||||
|
@ -43,7 +43,7 @@
|
||||
.chatroom-body {
|
||||
flex-direction: row;
|
||||
flex-flow: nowrap;
|
||||
background-color: white;
|
||||
background-color: var(--background);
|
||||
border-top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
@ -14,10 +14,12 @@ export default (o) => {
|
||||
const show_subject = (subject && !o.subject_hidden);
|
||||
return html`
|
||||
<div class="chatbox-title ${ show_subject ? '' : "chatbox-title--no-desc"}">
|
||||
<div class="chatbox-title--row">
|
||||
${ (!_converse.api.settings.get("singleton")) ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
|
||||
<div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
|
||||
${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-title__buttons row no-gutters">
|
||||
${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
|
||||
${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
|
||||
|
@ -53,7 +53,7 @@ export default (o) => {
|
||||
return html`
|
||||
<div class="roster-group" data-group="${o.name}">
|
||||
<a href="#" class="list-toggle group-toggle controlbox-padded" title="${i18n_title}" @click=${ev => toggleGroup(ev, o.name)}>
|
||||
<converse-icon color="var(--chat-head-color)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
|
||||
<converse-icon color="var(--chat-head-color-dark)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
|
||||
</a>
|
||||
<ul class="items-list roster-group-contacts ${ (collapsed.includes(o.name)) ? 'collapsed' : '' }" data-group="${o.name}">
|
||||
${ o.contacts.map(renderContact) }
|
||||
|
Loading…
Reference in New Issue
Block a user