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 New Issue
Block a user