#Recolors the Stage Icon so its more

1 messages · Page 1 of 1 (latest)

candid moss
#

won't it look better if you made the guy white or black based on the theme?

/*--- Channel List User Icon Recolor ---*/
.icon_d8bfb3:has(path[d^="M19.61 18.25a1.08"]) path[d^="M15 12a3 3 0 1 1-6"] {
    color: var(--white-user-color, #e1dfdf) !important;
}```
no idea how to change it based on the theme
image.png
stone lily
gilded ore
#

how would i change it to colour both semi circles?

candid moss
stone lily
#

That’s why I only re-colored the first one

stone lily
gilded ore
#

Ah gotcha, thanks for the info

tame torrent
#

I wonder if it is possible to make the blue part of the icon show up only if there's a stage event going on 🤔

stone lily
stone lily
tame torrent
tame torrent
stone lily
whole ember
stone lily
#

The problem being it recolours the inner circle and doesn’t recolours the head

whole ember
#

that svg is so scuffed wtf discord

the head is another path that you could apply it to

you could also change the path

stone lily
#

so I could change the color of just the head on locked stages, but then it would be the whole person on normal stages

#

(doing this has taught me one thing and that’s that a lot of discord’s svg(s) are hella scuffed)

whole ember
#

working on something that's kind of scuffed but will fix this

# 
svg.icon_d8bfb3 {
  /* inner circle and body -> inner circle*/
  path[d^="M13.48 16.18c.39.1.45.62.2.93A2.99"] {
    d: path("M18.98 12.58c-.02.24-.23.42-.48.45-.18.02-.35.05-.53.09-.45.1-1-.36-.98-.82L17 12a5 5 0 1 0-9.6 1.94c.17.42.13.9-.18 1.23l-.05.06c-.43.47-1.18.42-1.45-.14a7 7 0 1 1 13.26-2.51Z");
  }
  /* head -> head and body*/
  path[d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"] {
    d: path("M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM13.48 16.18c.39.1.45.62.2.93A2.99 2.99 0 0 0 13 19v3.5c0 .26-.2.47-.46.49a11.16 11.16 0 0 1-5.4-1.12 1.52 1.52 0 0 1-.8-1.84 6 6 0 0 1 7.14-3.85Z")
  }
}```
#

also you can use [data-dnd-name="Stage channel"] and [data-dnd-name="Locked stage"] (not affected by language) to select channels better

tame torrent
#

I wanted to make the volume icon in voice channels animate if and only if the voice channel is active. I spent too long making an entirely new animated SVG for the animation property to not work at all when swapped with content or background-image lol

#

here's what I came up with instead:

.containerDefault_f6f816:has([class*="voiceUser_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M15.16"] {
  d: path("M15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z");
  animation-name: volume-icon-large;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.containerDefault_f6f816:has([class*="voiceUser_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M12"] {
  d: path("M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z");
}

@keyframes volume-icon-large {
  0%   {color: var(--background-secondary);}
  50%  {color: var(--currentColor);}
  100% {color: var(--background-secondary);}
}
#

there are only two paths on the volume icon, so one of the sound bars always needs to be static unfortunately.

#

just in case either of you want to play around with it, here was the SVG (convert it into CSS or base64 before using in QuickCSS):
black and white were just temp values, CSS variables like currentColor or background-secondary weren't working either

<svg class="icon_d8bfb3" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <style>
    #volume-icon-small {
      animation-name: small;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    @keyframes small {
      0%   {color: white;}
      50%  {color: black;}
      100% {color: white;}
    }
    #volume-icon-large {
      animation-name: large;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    @keyframes large {
      0%   {color: black;}
      40%  {color: white;}
      60%  {color: white;}
      100% {color: black;}
    }
  </style>
  <path fill="currentColor" d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3Z" id="volume-icon-base"></path>

  <path fill="currentColor" d="M15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z" id="volume-icon-small"></path>

  <path fill="currentColor" d="M15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z" id="volume-icon-large"></path>
</svg>
whole ember
tame torrent
#

They sorta work, if you just swap an SVG you can use the old variables, but it won't work if you reference additional Discord variables

stone lily
#

what did i wake up too?

#

it’s to early for this kinda of reading

whole ember
#

with content:?

whole ember
tame torrent
whole ember
#

with content: data:[svg stuff whatever]?

tame torrent
#

yeah

#

you need to encode the SVG first though

whole ember
#

yeah
url encoded data uri