Status based Activity Status Icon | libVencore | Page 1

sonic frost Feb 27, 2025, 12:18 PM

#

wouldn't it be better to use :has(>div>[aria-label])

solid vale Feb 27, 2025, 12:19 PM

#

maybe

sonic frost Feb 27, 2025, 12:21 PM

#

ok it does still work like that

solid vale Feb 27, 2025, 12:25 PM

#

fixed ok?

neon wind Feb 27, 2025, 12:58 PM

#

peak

polar parcel Feb 27, 2025, 1:19 PM

#

does this work

#

not really working

solid vale Feb 27, 2025, 2:19 PM

#

polar parcel not really working

screenshot?

narrow rose Feb 28, 2025, 12:00 AM

#

weird

solid vale Feb 28, 2025, 1:20 AM

#

narrow rose weird

works for me
can you open devtools and show me what the 'd' attribute looks like

shy phoenix Feb 28, 2025, 8:33 AM

#

If you wanted this to be language-proof, you could use masks instead of aria-labels

polar parcel Feb 28, 2025, 9:42 AM

#

narrow rose weird

same over here

solid vale Feb 28, 2025, 11:23 AM

#

are y'all using different languages?

polar parcel Feb 28, 2025, 11:37 AM

#

uh

#

no

solid vale Feb 28, 2025, 11:38 AM

#

thats wonky

polar parcel Feb 28, 2025, 11:38 AM

#

yea

solid vale Feb 28, 2025, 11:38 AM

#

will have to see how to use masks

shy phoenix Feb 28, 2025, 1:57 PM

#

solid vale will have to see how to use masks

should just be looking for rect[mask="url(#svg-mask-status-**STATUS**)"]

near breach Mar 2, 2025, 6:49 PM

#

not working in german

brittle zinc Mar 2, 2025, 11:20 PM

#

affects only english language and memberlist only, doesnt seem to work on dm list

sonic frost Mar 3, 2025, 2:50 AM

#

you can change the aria labels to the German translation

polar parcel Mar 3, 2025, 10:00 AM

#

huhhh

#

but i am using english and im on member list

sonic frost Mar 3, 2025, 10:12 AM

#

near breach not working in german

i was refering to this message

void yacht Mar 23, 2025, 7:02 PM

#

how do you even apply this? is there an import url? or where does this code stuff even paste into?

shy phoenix Mar 23, 2025, 7:07 PM

#

void yacht how do you even apply this? is there an import url? or where does this code stuf...

you paste it into your quickcss

near breach Mar 26, 2025, 4:08 PM

#

broken with the new ui refresh

void yacht Mar 26, 2025, 11:59 PM

#

dang 😭 hopefully a fix is thrown out soon :3

solid vale Mar 27, 2025, 12:20 AM

#

soon™️

onyx stirrup Apr 4, 2025, 8:58 AM

#

Update for visual refresh. (last updated: <t:1744635240:R>)

/* status based activity icon */
[class^=memberInner]:has(> div > [aria-label*="Online"]) [class^=subText] svg>path[fill="#40a258"] {
    fill: #43b581;
}

[class^=memberInner]:has(> div > [aria-label*="Idle"]) [class^=subText] svg>path[fill="#40a258"] {
    fill: #f0b232;
}

[class^=memberInner]:has(> div > [aria-label*="Do Not Disturb"]) [class^=subText] svg>path[fill="#40a258"] {
    fill: #f23f43;
}

[class^=memberInner]:has(> div > [aria-label*=Streaming]) [class^=subText] svg>path[fill="#40a258"] {
    fill: #643da7;
}

narrow rose Apr 4, 2025, 11:22 AM

#

hmm maybe not working for me

near breach Apr 4, 2025, 11:58 AM

#

narrow rose hmm maybe not working for me

It works. Are you using Discord in english or a diff. language?

near breach Apr 4, 2025, 11:58 AM

#

onyx stirrup Update for visual refresh. (last updated: <t:1744635240:R>) ```css /* status b...

works. Thanks!

narrow rose Apr 4, 2025, 12:11 PM

#

ok nvm now working!

merry sleet Apr 18, 2025, 4:10 PM

#

any way to get this to work in the DM list?

errant chasm Apr 25, 2025, 3:16 PM

#

not working in the friends list

solid vale Apr 25, 2025, 10:28 PM

#

not bothering to fix it

errant chasm Apr 25, 2025, 11:02 PM

#

solid vale not bothering to fix it

it is since this thing is made to sync the activity icons color with the status color

near breach May 3, 2025, 11:59 AM

#

seems to be broken again

#

fixed it myself. here's the updated css but in german so u gotta replace the german stuff with ur own language 🇩🇪

/* status based activity icon */
[class^=memberInner]:has(> div > [aria-label*="Online"]) [class^=subText] svg>path[fill="#43a25a"] {
    fill: #43b581;
}

[class^=memberInner]:has(> div > [aria-label*="Abwesend"]) [class^=subText] svg>path[fill="#43a25a"] {
    fill: #f0b232;
}

[class^=memberInner]:has(> div > [aria-label*="Bitte nicht stören"]) [class^=subText] svg>path[fill="#43a25a"] {
    fill: #f23f43;
}

[class^=memberInner]:has(> div > [aria-label*=Streamt]) [class^=subText] svg>path[fill="#43a25a"] {
    fill: #643da7;
}

violet dagger May 21, 2025, 7:01 PM

#

still doesn't work for me

violet dagger May 21, 2025, 7:05 PM

#

near breach fixed it myself. here's the updated css but in german so u gotta replace the ger...

this code does the trick, thanks!

glad fern Jun 11, 2025, 10:58 AM

#

Is there a new version?

cloud jetty Aug 21, 2025, 10:03 PM

#

hi this dont work for me, need some help

solid vale Aug 21, 2025, 11:44 PM

#

cant bother to fix, make it yourself

cloud jetty Aug 22, 2025, 2:50 PM

#

solid vale cant bother to fix, make it yourself

damn

glad fern Aug 24, 2025, 3:24 AM

#

solid vale cant bother to fix, make it yourself

(??????

#

what?

solid vale Aug 24, 2025, 3:25 AM

#

exactly what i said
i cannot bother fixing it
so if you want it, make it yourself

near breach Aug 25, 2025, 7:59 PM

#

it still works wdym

near breach Aug 25, 2025, 7:59 PM

#

near breach fixed it myself. here's the updated css but in german so u gotta replace the ger...

^

#

I fixed it a couple months ago

#

@glad fern

glad fern Sep 5, 2025, 9:33 AM

#

near breach I fixed it a couple months ago

em not working

near breach Sep 5, 2025, 10:08 AM

#

glad fern em not working

works fine for me. U changed the strings to your locale?

glad fern Sep 5, 2025, 10:08 AM

#

no

near breach Sep 5, 2025, 10:08 AM

#

smh

glad fern Sep 5, 2025, 10:08 AM

#

i use quick css

near breach Sep 5, 2025, 10:08 AM

#

reading instructions challenge = impossible

#

u need to change the strings in there to your language

#

i didnt bother to change it to english bc I dont give a fuck

glad fern Sep 5, 2025, 10:09 AM

#

uh?

#

oh~ i know it

near breach Sep 5, 2025, 10:09 AM

#

u dunno what a string is?

glad fern Sep 5, 2025, 10:09 AM

#

tks

glad fern Sep 5, 2025, 10:14 AM

#

near breach u dunno what a string is?

fixed,tks!

#

near breach Sep 5, 2025, 12:17 PM

#

glad fern fixed,tks!

Np bro

celest hull Oct 30, 2025, 1:30 PM

#

I changed it to Korean and am using it well >.0
I have a question but does the icon appear purple when streaming?

glad fern Oct 30, 2025, 1:36 PM

#

celest hull I changed it to Korean and am using it well >.0 I have a question but does the i...

yes

#

I have the impression

solid vale Oct 30, 2025, 1:36 PM

#

celest hull I changed it to Korean and am using it well >.0 I have a question but does the i...

how did you get the activity status icons?

celest hull Oct 30, 2025, 1:36 PM

#

glad fern yes

Okay, thank you for your answer!!

celest hull Oct 30, 2025, 1:37 PM

#

solid vale how did you get the activity status icons?

What icon are you talking about because I'm not familiar with English?!

solid vale Oct 30, 2025, 1:37 PM

#

celest hull What icon are you talking about because I'm not familiar with English?!

on right of my account

#

beside status

celest hull Oct 30, 2025, 1:39 PM

#

solid vale beside status

It's in an unofficial plugin betteractiv

solid vale Oct 30, 2025, 1:39 PM

#

ah

coarse nova Nov 17, 2025, 9:55 AM

#

now works with dms list, friends list and the +1/+2 when you have more than 1 activity. i thinks dont have enough friends online to really check anything

/* ============================================
      Status based Activity Status Icon
============================================ */

/* ======================
        ONLINE
====================== */

[class^=memberInner_]:has([aria-label*="Online"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Online"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Online"]) svg path[fill="#43a25a"] {
    fill: #43b581 !important; /* or any color or #43a25a if you wanna match discord status */
}

[class^=memberInner_]:has([aria-label*="Online"]) [class*="activityCounter_"],
[class^=channel_]:has([aria-label*="Online"]) [class*="activityCounter_"],
[class^=peopleListItem_]:has([aria-label*="Online"]) [class*="activityCounter_"] {
    color: #43b581 !important; /* or #43a25a */
}

/* ======================
         IDLE
====================== */

[class^=memberInner_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"] {
    fill: #f0b232 !important; /* or #ca9654 */
}

[class^=memberInner_]:has([aria-label*="Idle"]) [class*="activityCounter_"],
[class^=channel_]:has([aria-label*="Idle"]) [class*="activityCounter_"],
[class^=peopleListItem_]:has([aria-label*="Idle"]) [class*="activityCounter_"] {
    color: #f0b232 !important; /* or #ca9654 */
}

#

/* ======================
     DO NOT DISTURB
====================== */

[class^=memberInner_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"] {
    fill: #f23f43 !important; /* or #d83a42 */
}

[class^=memberInner_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"],
[class^=channel_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"],
[class^=peopleListItem_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"] {
    color: #f23f43 !important; /* or #d83a42 */
}

/* ======================
      STREAMING
====================== */

[class^=memberInner_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"] {
    fill: #643da7 !important; /* or #9147ff */
}

[class^=memberInner_]:has([aria-label*="Streaming"]) [class*="activityCounter_"],
[class^=channel_]:has([aria-label*="Streaming"]) [class*="activityCounter_"],
[class^=peopleListItem_]:has([aria-label*="Streaming"]) [class*="activityCounter_"] {
    color: #643da7 !important; /* or #9147ff */
}

/* ============================================
      End Status based Activity Status Icon
============================================ */

#

if you want the colors to match w status:
online: #43a25a
idle: #ca9654
dnd: #d83a42
streaming: #9147ff

solid vale Nov 17, 2025, 1:43 PM

#

coarse nova if you want the colors to match w status: online: #43a25a idle: #ca9654 dnd: #d8...

streaming is purple

#

but i dont know the color exactly

coarse nova Nov 17, 2025, 5:23 PM

#

hmm leaving the color alone for now i dont think streaming is working? just tested by try streaming in my personal server 🤔 but toasts fix also show it as green instead of purple there so its probably a different streaming thing?

#

oh wait purple and streaming. its twitch isnt it. well i cant really test if it works then but it probably does

#

eh nvm just saw a twitch streamer in this server. it works fine and the color to match discords status is #9147ff

coarse nova Nov 18, 2025, 7:24 AM

#

saw another thing that slightly bother me so this is a version that doesnt change the color of "+1/+2" if its not next to the status icon

/* ============================================
      Status based Activity Status Icon
============================================ */

/* ======================
        ONLINE
====================== */

[class^=memberInner_]:has([aria-label*="Online"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Online"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Online"]) svg path[fill="#43a25a"] {
    fill: #43b581 !important; /* or any color or #43a25a if you wanna match discord status */
}

[class^=memberInner_]:has([aria-label*="Online"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=channel_]:has([aria-label*="Online"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=peopleListItem_]:has([aria-label*="Online"]) [class*="activityCounter_"][style*="var(--status-positive)"] {
    color: #43b581 !important; /* or #43a25a */
}

/* ======================
         IDLE
====================== */

[class^=memberInner_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Idle"]) svg path[fill="#43a25a"] {
    fill: #f0b232 !important; /* or #ca9654 */
}

[class^=memberInner_]:has([aria-label*="Idle"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=channel_]:has([aria-label*="Idle"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=peopleListItem_]:has([aria-label*="Idle"]) [class*="activityCounter_"][style*="var(--status-positive)"] {
    color: #f0b232 !important; /* or #ca9654 */
}

#

/* ======================
     DO NOT DISTURB
====================== */

[class^=memberInner_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Do Not Disturb"]) svg path[fill="#43a25a"] {
    fill: #f23f43 !important; /* or #d83a42 */
}

[class^=memberInner_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=channel_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=peopleListItem_]:has([aria-label*="Do Not Disturb"]) [class*="activityCounter_"][style*="var(--status-positive)"] {
    color: #f23f43 !important; /* or #d83a42 */
}

/* ======================
      STREAMING
====================== */

[class^=memberInner_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"],
[class^=channel_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"],
[class^=peopleListItem_]:has([aria-label*="Streaming"]) svg path[fill="#43a25a"] {
    fill: #643da7 !important; /* or #9147ff */
}

[class^=memberInner_]:has([aria-label*="Streaming"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=channel_]:has([aria-label*="Streaming"]) [class*="activityCounter_"][style*="var(--status-positive)"],
[class^=peopleListItem_]:has([aria-label*="Streaming"]) [class*="activityCounter_"][style*="var(--status-positive)"] {
    color: #643da7 !important; /* or #9147ff */
}

/* ============================================
      End Status based Activity Status Icon
============================================ */

sterile valve Nov 30, 2025, 4:37 AM

#

coarse nova saw another thing that slightly bother me so this is a version that doesnt chang...

does this work?

coarse nova Dec 2, 2025, 8:07 PM

#

sterile valve does this work?

sry didnt see this sooner but yeah. its the version im currently using

drifting kayak Dec 9, 2025, 2:56 AM

#

For do not disturb i used #D13746 and for idle i used #C69756, if anyone wants a different color. Maybe they're more accurate.

coarse nova Dec 17, 2025, 9:37 PM

#

update timeee. this one doesnt have an online part bc im using discords colors (add it yourself if you want to change things, shouldnt be too hard) also should fix that bug when someone is streaming to you or in a same server and their status icons turn purple despite not streaming on twitch

/*Idle*/

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Idle"]
) svg path[fill="#43a25a"] {
  fill: #ca9654 !important;
}

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Idle"]
) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: #ca9654 !important;
}

/*DND*/

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Do Not Disturb"]
) svg path[fill="#43a25a"] {
  fill: #d83A42 !important;
}

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Do Not Disturb"]
) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: #d83A42 !important;
}

/*Streaming*/

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Streaming"]
) svg path[fill="#43a25a"] {
  fill: #643da7 !important;
}

[class*="memberInner"]:has(
  > [class*="avatar"] [aria-label*="Streaming"]
) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: #643da7 !important;
}

#

dont have any friends online so i cant check and update dms list and friends list yet

coarse nova Dec 18, 2025, 1:12 PM

#

alr this should work for all the lists now

:root {
  --idle-color: #ffc04e;
  --dnd-color: #da3e44;
  --streaming-color: #9147ff;
}

/*Idle*/

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Idle"]) svg path[fill="#45a366"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Idle"]) svg path[fill="#45a366"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Idle"]) svg path[fill="#45a366"] {
  fill: var(--idle-color) !important;
}

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Idle"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Idle"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Idle"]) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: var(--idle-color) !important;
}

#

/*DND*/

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Do Not Disturb"]) svg path[fill="#45a366"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Do Not Disturb"]) svg path[fill="#45a366"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Do Not Disturb"]) svg path[fill="#45a366"] {
  fill: var(--dnd-color) !important;
}

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Do Not Disturb"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Do Not Disturb"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Do Not Disturb"]) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: var(--dnd-color) !important;
}

#


/*Streaming*/

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Streaming"]) svg path[fill="#45a366"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Streaming"]) svg path[fill="#45a366"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Streaming"]) svg path[fill="#45a366"] {
  fill: var(--streaming-color) !important;
}

[class*="memberInner"]:has([class*="avatar"] [aria-label*="Streaming"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="channel"]:has([class*="avatar"] [aria-label*="Streaming"]) [class*="activityCounter"][style*="var(--status-positive)"],
[class*="peopleListItem"]:has([class*="avatar"][aria-label*="Streaming"]) [class*="activityCounter"][style*="var(--status-positive)"] {
  color: var(--streaming-color) !important;
}

#

or just use

@import url(https://raw.githubusercontent.com/its-mik/VC-stuff/refs/heads/main/StatusBasedActivity.css);

if you dont wanna change anything

#Status based Activity Status Icon