mirror of
https://github.com/thelounge/thelounge.git
synced 2024-05-04 07:23:22 +02:00
style: Put user colors into the smallest possible scope
The only thing that cares about user colors is the user component. Putting a class value on the chat component seems to be the wrong place. This also allows us to remove various css selectors so that we don't need to be that specific. After all whatever has that class needs to be colored, we don't care where it is.
This commit is contained in:
parent
deeea274da
commit
f55f772659
|
@ -4,7 +4,6 @@
|
|||
id="chat"
|
||||
:class="{
|
||||
'hide-motd': store.state.settings.motd,
|
||||
'colored-nicks': store.state.settings.coloredNicks,
|
||||
'time-seconds': store.state.settings.showSeconds,
|
||||
'time-12h': store.state.settings.use12hClock,
|
||||
}"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<span
|
||||
:class="['user', nickColor, {active: active}]"
|
||||
:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
|
||||
:data-name="user.nick"
|
||||
role="button"
|
||||
v-on="onHover ? {mouseenter: hover} : {}"
|
||||
|
@ -16,6 +16,7 @@ import {UserInMessage} from "../../server/models/msg";
|
|||
import eventbus from "../js/eventbus";
|
||||
import colorClass from "../js/helpers/colorClass";
|
||||
import type {ClientChan, ClientNetwork, ClientUser} from "../js/types";
|
||||
import {useStore} from "../js/store";
|
||||
|
||||
type UsernameUser = Partial<UserInMessage> & {
|
||||
mode?: string;
|
||||
|
@ -69,11 +70,14 @@ export default defineComponent({
|
|||
});
|
||||
};
|
||||
|
||||
const store = useStore();
|
||||
|
||||
return {
|
||||
mode,
|
||||
nickColor,
|
||||
hover,
|
||||
openContextMenu,
|
||||
store,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
<div
|
||||
id="chat"
|
||||
:class="{
|
||||
'colored-nicks': store.state.settings.coloredNicks,
|
||||
'time-seconds': store.state.settings.showSeconds,
|
||||
'time-12h': store.state.settings.use12hClock,
|
||||
}"
|
||||
|
|
|
@ -1438,42 +1438,42 @@ textarea.input {
|
|||
|
||||
/* Nicknames */
|
||||
|
||||
#chat .user {
|
||||
.user {
|
||||
color: #50a656;
|
||||
}
|
||||
|
||||
#chat.colored-nicks .user.color-1 { color: #107ead; }
|
||||
#chat.colored-nicks .user.color-2 { color: #a86500; }
|
||||
#chat.colored-nicks .user.color-3 { color: #008a3c; }
|
||||
#chat.colored-nicks .user.color-4 { color: #e00096; }
|
||||
#chat.colored-nicks .user.color-5 { color: #f0000c; }
|
||||
#chat.colored-nicks .user.color-6 { color: #000094; }
|
||||
#chat.colored-nicks .user.color-7 { color: #006441; }
|
||||
#chat.colored-nicks .user.color-8 { color: #00566e; }
|
||||
#chat.colored-nicks .user.color-9 { color: #e6006b; }
|
||||
#chat.colored-nicks .user.color-10 { color: #0d8766; }
|
||||
#chat.colored-nicks .user.color-11 { color: #006b3b; }
|
||||
#chat.colored-nicks .user.color-12 { color: #00857e; }
|
||||
#chat.colored-nicks .user.color-13 { color: #00465b; }
|
||||
#chat.colored-nicks .user.color-14 { color: #eb005a; }
|
||||
#chat.colored-nicks .user.color-15 { color: #e62600; }
|
||||
#chat.colored-nicks .user.color-16 { color: #0f8546; }
|
||||
#chat.colored-nicks .user.color-17 { color: #e60067; }
|
||||
#chat.colored-nicks .user.color-18 { color: #eb002b; }
|
||||
#chat.colored-nicks .user.color-19 { color: #eb003f; }
|
||||
#chat.colored-nicks .user.color-20 { color: #007a56; }
|
||||
#chat.colored-nicks .user.color-21 { color: #095092; }
|
||||
#chat.colored-nicks .user.color-22 { color: #000bde; }
|
||||
#chat.colored-nicks .user.color-23 { color: #008577; }
|
||||
#chat.colored-nicks .user.color-24 { color: #00367d; }
|
||||
#chat.colored-nicks .user.color-25 { color: #007e9e; }
|
||||
#chat.colored-nicks .user.color-26 { color: #006119; }
|
||||
#chat.colored-nicks .user.color-27 { color: #007ea8; }
|
||||
#chat.colored-nicks .user.color-28 { color: #3c8500; }
|
||||
#chat.colored-nicks .user.color-29 { color: #e6007e; }
|
||||
#chat.colored-nicks .user.color-30 { color: #c75300; }
|
||||
#chat.colored-nicks .user.color-31 { color: #eb0400; }
|
||||
#chat.colored-nicks .user.color-32 { color: #e60082; }
|
||||
.user.color-1 { color: #107ead; }
|
||||
.user.color-2 { color: #a86500; }
|
||||
.user.color-3 { color: #008a3c; }
|
||||
.user.color-4 { color: #e00096; }
|
||||
.user.color-5 { color: #f0000c; }
|
||||
.user.color-6 { color: #000094; }
|
||||
.user.color-7 { color: #006441; }
|
||||
.user.color-8 { color: #00566e; }
|
||||
.user.color-9 { color: #e6006b; }
|
||||
.user.color-10 { color: #0d8766; }
|
||||
.user.color-11 { color: #006b3b; }
|
||||
.user.color-12 { color: #00857e; }
|
||||
.user.color-13 { color: #00465b; }
|
||||
.user.color-14 { color: #eb005a; }
|
||||
.user.color-15 { color: #e62600; }
|
||||
.user.color-16 { color: #0f8546; }
|
||||
.user.color-17 { color: #e60067; }
|
||||
.user.color-18 { color: #eb002b; }
|
||||
.user.color-19 { color: #eb003f; }
|
||||
.user.color-20 { color: #007a56; }
|
||||
.user.color-21 { color: #095092; }
|
||||
.user.color-22 { color: #000bde; }
|
||||
.user.color-23 { color: #008577; }
|
||||
.user.color-24 { color: #00367d; }
|
||||
.user.color-25 { color: #007e9e; }
|
||||
.user.color-26 { color: #006119; }
|
||||
.user.color-27 { color: #007ea8; }
|
||||
.user.color-28 { color: #3c8500; }
|
||||
.user.color-29 { color: #e6007e; }
|
||||
.user.color-30 { color: #c75300; }
|
||||
.user.color-31 { color: #eb0400; }
|
||||
.user.color-32 { color: #e60082; }
|
||||
|
||||
#chat .self .content {
|
||||
color: var(--body-color-muted);
|
||||
|
|
Loading…
Reference in a new issue