Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add hover color for svg icons

Browse Source
This commit is contained in:
JC Brand 2022-01-29 11:55:06 +01:00
parent 2e9f478c87
commit 8dcacd41bf
10 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/muc-views/templates/muc-sidebar.js
View File

@ -8,7 +8,7 @@ export default (o) => {
return html`
<div class="occupants-header">
<i class="hide-occupants" @click=${o.closeSidebar}>
<converse-icon color="var(--text-color)" class="fa fa-times" size="1em"></converse-icon>
<converse-icon color="var(--subdued-color)" class="fa fa-times" size="1em"></converse-icon>
</i>
<div class="occupants-header--title">
<span class="occupants-heading">${i18n_participants}</span>

4
src/plugins/profile/templates/profile.js
View File

@ -8,14 +8,14 @@ import { html } from "lit";
function tpl_signout (o) {
const i18n_logout = __('Log out');
return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${o.logout}>
<converse-icon color="var(--subdued-color)" class="fa fa-sign-out-alt" size="1em"></converse-icon>
<converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
</a>`
}
function tpl_user_settings_button (o) {
const i18n_details = __('Show details about this chat client');
return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}>
<converse-icon color="var(--subdued-color)" class="fa fa-cog" size="1em"></converse-icon>
<converse-icon class="fa fa-cog" size="1em"></converse-icon>
</a>`;
}

4
src/plugins/roomslist/templates/roomslist.js
View File

@ -70,12 +70,12 @@ export default (o) => {
<a class="controlbox-heading__btn show-list-muc-modal"
@click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
<converse-icon class="fa fa-list-ul right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
<converse-icon class="fa fa-list-ul right" path-prefix="/dist" size="1em"></converse-icon>
</a>
<a class="controlbox-heading__btn show-add-muc-modal"
@click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
<converse-icon class="fa fa-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
<converse-icon class="fa fa-plus right" path-prefix="/dist" size="1em"></converse-icon>
</a>
</div>

2
src/plugins/rosterview/styles/roster.scss
View File

@ -32,7 +32,6 @@
span {
padding: 0.3em;
cursor: pointer;
min-width: 25px;
text-align: center;
}
@ -42,6 +41,7 @@
margin: 0.2em;
font-size: calc(var(--font-size) - 2px);
}
.state-type {
font-size: calc(var(--font-size) - 2px);
width: 100%;

4
src/plugins/rosterview/templates/roster.js
View File

@ -47,7 +47,7 @@ export default (el) => {
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span>
<a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}">
<converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
<converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" size="1em"></converse-icon>
</a>
${ api.settings.get('allow_contact_requests') ? html`
<a class="controlbox-heading__btn add-contact"
@ -55,7 +55,7 @@ export default (el) => {
title="${i18n_title_add_contact}"
data-toggle="modal"
data-target="#add-contact-modal">
<converse-icon class="fa fa-user-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1.25em"></converse-icon>
<converse-icon class="fa fa-user-plus right" size="1.25em"></converse-icon>
</a>` : '' }
</div>
<converse-roster-filter></converse-roster-filter>

6
src/plugins/rosterview/templates/roster_filter.js
View File

@ -21,9 +21,9 @@ export default (o) => {
@submit=${o.submitFilter}>
<div class="form-inline flex-nowrap">
<div class="filter-by d-flex flex-nowrap">
<span @click=${o.changeTypeFilter} class="fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
<span @click=${o.changeTypeFilter} class="fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
<span @click=${o.changeTypeFilter} class="fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
<span @click=${o.changeTypeFilter} class="clickable fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
<span @click=${o.changeTypeFilter} class="clickable fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
<span @click=${o.changeTypeFilter} class="clickable fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
</div>
<div class="btn-group">
<input .value="${o.filter_text || ''}"

16
src/shared/components/styles/icon.scss
View File

@ -2,9 +2,17 @@ converse-icon {
display: inline-block;
padding: 0;
margin: 0;
fill: var(--subdued-color);
&:hover {
fill: var(--text-color);
svg {
fill: var(--subdued-color);
}
}
a, .clickable {
converse-icon {
svg {
&:hover {
fill: var(--icon-hover-color);
}
}
}
}

15
src/shared/styles/_core.scss
View File

@ -211,7 +211,7 @@
cursor: pointer;
}
a, a:visited, a:not([href]):not([tabindex]) {
a, a:visited, a:not([href]):not([tabindex]), .clickable {
text-decoration: none;
color: var(--link-color);
text-shadow: none;
@ -223,14 +223,19 @@
}
&.fa, &.far, &.fas {
fill: var(--subdued-color);
color: var(--subdued-color);
&:hover {
color: var(--gray-color);
color: var(--icon-hover-color);
}
}
}
.clickable {
&:hover {
cursor: pointer;
}
}
svg {
border-radius: var(--chatbox-border-radius);
}
@ -239,10 +244,6 @@
color: var(--subdued-color);
}
.fa:hover, .far:hover, .fas:hover {
color: var(--gray-color);
}
q {
quotes: "“" "”" "‘" "’";
&.reason {

1
src/shared/styles/themes/classic.scss
View File

@ -19,6 +19,7 @@
// ---
--icon-hover-color: var(--text-color);
--info-color: #1E9652; // $dark-green
--chat-status-online: var(--green);

1
src/shared/styles/themes/dracula.scss
View File

@ -22,6 +22,7 @@
// ---
--icon-hover-color: var(--cyan);
--gray-color: var(--comment);
--highlight-color: var(--foreground);