DM-button-like read all messages button

[brave oracle]

nitpick: the styling of it is inconsistent with the guild waitlist button that goes in the same area

not a big deal though just thought i'd point it out

[errant raft]

Just change on this at 8 line background-color: var(--background-secondary);

[brave oracle]

thanks

[brave oracle]

I messed with the styling some more and got this. It's now the same size as other items in the list, has a bottom margin (for when dm icons are there), and I changed the colors

The hover color is hardcoded instead of a variable because of my theme, just change it to what you want

oh and its fully rounded now too

[austere nymph]

are u sure it works

cause i dont see it

[austere nymph]

hey @modern shuttle this doesnt work for me

[modern shuttle]

you're gonna have to give more info than that

[austere nymph]

and my whole quickcss window is broken

[modern shuttle]

your problem, not mine

https://camo.githubusercontent.com/bd3d650d701f5dd5af88a1e72db7164e6c2a08c0d011f6c7420393fbd1a971ff/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f736b696c6c2d69737375652d7265643f7374796c653d666c61742d737175617265

[austere nymph]

bruh what

[brave oracle]

if quickcss is completely broken that means something is wrong with your setup, not with this snippet

[austere nymph]

oh

[austere nymph]

wait does this work without ddex4

oh nvm it doesnt work

[austere nymph]

i updated to new vencord version but still not working

[brave oracle]

ask in #🏥-vencord-support-🏥

has nothing to do with this snippet

[austere nymph]

guys i figured it out

wait @modern shuttle can you add read all when hovering

[modern shuttle]

Uhh it'd be really fucking annoying

[austere nymph]

oh ok

[dapper cave]

a potentially better icon, to make it more obvious that it "reads all"

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2UzZTNlMyI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE4IDdsLTEuNDEtMS40MS02LjM0IDYuMzQgMS40MSAxLjQxTDE4IDd6bTQuMjQtMS40MUwxMS42NiAxNi4xNyA3LjQ4IDEybC0xLjQxIDEuNDFMMTEuNjYgMTlsMTItMTItMS40Mi0xLjQxek0uNDEgMTMuNDFMNiAxOWwxLjQxLTEuNDFMMS44MyAxMiAuNDEgMTMuNDF6Ii8+PC9zdmc+

https://fonts.google.com/icons?icon.set=Material+Icons&selected=Material+Icons+Outlined:done_all:&icon.size=24&icon.color=%23e3e3e3

[modern shuttle]

Please don't send a message if you have nothing to add to the conversation. If you wanna agree with something, try a reaction!

[heady path]

dont work..

[modern shuttle]

give more info.

[heady path]

i just loading, and see nothing new

[modern shuttle]

what do you mean? is the css not applying to the button?

[modern shuttle]

do you have the readallnotifications plugin even enabled?

also damn thats a tiny server list

[austere nymph]

he doesnt

[austere nymph]

what

[strange scaffold]

this does not work

[modern shuttle]

do you have the readallnotifications plugin enabled?

[strange scaffold]

oh

[azure vale]

i seem to have an issue with this not sure if u know a fix for it

[azure vale]

nvm fixed this by tossing it in a css file instead of it being in quick css

[austere nymph]

oh

[bleak abyss]

wha-

[austere nymph]

oh

[errant raft]

.vc-ranb-button {
  margin: 0 12px;
  display: flex;
  /*width: calc(100% - 20px);*/
  /*wight: var(--custom-guild-list-wight);*/
  wight: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  /*height: 40px !important;*/
  min-height: 40px;
  max-height: 40px !important;
  max-width: 40px !important;
  padding: 2px;
  background-color: var(--background-secondary);
  border: none;
  border-radius: 12px;

  .contents__201d5 {
    font-size: 0px;
  }

  .contents__201d5::after {
    content: "asdfg";
    font-size: 18px;
    width: 16px;
    height: 16px;
    position: relative;
    color: transparent;
    top: 2px;
    left: 11px;
    background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
  }

  &:hover {
    background-color: var(--brand-500);

    .contents__201d5::after {
      background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    }
  }
}

new ui fix

[errant raft]

Ahh, working only with my theme

I need to use constants

.vc-ranb-button {
  margin: 0 16px;
  display: flex;
  position: relative;
  /*width: calc(100% - 20px);*/
  /*wight: var(--custom-guild-list-wight);*/
  wight: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  /*height: 40px !important;*/
  min-height: 40px;
  max-height: 40px !important;
  max-width: 40px !important;
  padding: 2px;
  background-color: var(--background-primary);
  border: none;
  border-radius: 12px;

  .contents__201d5 {
    font-size: 0px;
  }

  .contents__201d5::after {
    content: "asdfg";
    font-size: 18px;
    width: 16px;
    height: 16px;
    position: relative;
    color: transparent;
    top: 2.5px;
    left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
  }

  &:hover {
    background-color: var(--brand-500);

    .contents__201d5::after {
      background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    }
  }
}
``` now work pretty good without themes

[tidal ocean]

the button icon is slightly offcenter and there's no rounded icon before the button is highlighted now for some reason

fixed the icon offset issue, just had to change this part to 2.5

fixed the background of the icon being gone by changing this line to --background-surface-higher

[errant raft]

The variable background surface higher doesn't work without themes and with my theme

[modern shuttle]

old ui user?

[errant raft]

Nah

[tidal ocean]

Well, it seemes to work with the Midnight theme at least

[wet marsh]

It works but uhh the position of the button is odd

[modern shuttle]

Using other themes, you are

[wet marsh]

yep

[tidal ocean]

Icon is offset on my end, and I'm not even using any themes now

[young topaz]

yeah mines even more offset, no themes and compact spacing

[young topaz]

fixed

[bleak abyss]

:(

what i doing wrong😭

[lucid silo]

copy the entire code snippet bruh

[tawny atlas]

i need help

  margin: 0 12px;
  display: flex;
  /*width: calc(100% - 20px);*/
  /*wight: var(--custom-guild-list-wight);*/
  wight: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  /*height: 40px !important;*/
  min-height: 40px;
  max-height: 40px !important;
  max-width: 40px !important;
  padding: 2px;
  background-color: var(--background-secondary);
  border: none;
  border-radius: 12px;

  .contents__201d5 {
    font-size: 0px;
  }

  .contents__201d5::after {
    content: "asdfg";
    font-size: 18px;
    width: 16px;
    height: 16px;
    position: relative;
    color: transparent;
    top: 5px;
    left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
  }

  &:hover {
    background-color: var(--brand-500);

    .contents__201d5::after {
      background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    }
  }
}``` 
this code i have

The other fixes above don't work, everything was fine until today.

[obsidian snow]

same issue

[autumn jungle]

i have a suspicon and i'll look into it

found the issue
the classes have changed

i'll try and get a working one

all i'll do is edit their code

[autumn jungle]

i have no idea if thus works for you

.vc-ranb-button {
  margin: 0 12px;
  display: flex;
  position: relative;
  width: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  min-height: 40px;
  max-height: 40px !important;
  max-width: 40px !important;
  padding: 2px;
  background-color: var(--background-mod-subtle);
  border: none;
  border-radius: 12px;
  text-decoration: none !important;
  font-size: 0px;
  transition: scale .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}

.vc-ranb-button::after {
    content: "asdfg";
    font-size: 18px;
    position: relative;
    color: transparent;
    left: 7px;
    background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
}

&:hover {
    background-color: var(--brand-500);

    .vc-ranb-button::after {
      background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    }
  }

all i did was change the classes, and re align it for me (unmodified interface)
god knows what will happen with themes like yours

it is anything but perfect

if it isnt lined up for you, mess around with the first .vc-ranb-button::after with the left
dont touch asdfg, i can only imagine the pain the person went though to have to do that.

and im not changing it cause it works better than i can figure out

gl to anyone else that wants to try and fix it further

just updated it to include the transition cause it was bugging me

so it matches the discord logos transition now

hope this helps some people

[obsidian snow]

That fixed it for me and also what I had before was wrongly sized because I had kept changing it to look as best as it could but it was wider then the icon above it so this now actually fixed 2 problems.

[autumn jungle]

cool

i am by no means the original creator

but im glad to have helped

[tidal ocean]

Doesn't seem to light up on hover like the Discord DM icon. Is there any way to tweak the code to fix that?

Sorry, might just be a theme issue. Other than that, this fixed it perfectly after tweaking the left a bit

[obsidian snow]

It's never changed color for me

[tawny atlas]

Thank you

[autumn jungle]

If you have a custom theme that could be the issue

[tidal ocean]

gotcha

[autumn jungle]

As this has the transition

If you set the transition to !important that may fix your issue

It's in the first block

transition: scale .15s ease-out, background-color .15s ease-out, color .15s ease-out !important;

[autumn jungle]

Check if that fixes it if you replace the transition with that

Cause !important overwrites

[autumn jungle]

does that solve your issue?

[pearl condor]

im using the midnight theme and the accent colors dont show up

by hovering obviously

sorry for the ping btw

[pearl condor]

@modern shuttle sorry for the ping but can the css be fixed again somehow?

[modern shuttle]

Sure, I love necroing old threads
Gimme 2 hours

[pearl condor]

thank you so much! it's just a very useful css to have around ngl, really fits with the discord ui

[autumn jungle]

no idea what the midnight theme is
if its not default, then thats likely the problem, as when its default it works just fine.
your theme is likely overwriting it somehow.
blade is much more experienced with CSS so im sure they've got this handled

[autumn jungle]

i just got the midnight theme and it works fine.
the colors are off, and its not aligned, but im not sure what your issue with the snippit is.

[autumn jungle]

im using this css

[modern shuttle]

@pearl condor @autumn jungle @tidal ocean@tawny atlas

FIXED

[autumn jungle]

wow it works well

ty sm blade0, ur getting quite good at discord css

[pearl condor]

tysm! such an aura farmer

[pearl condor]

@modern shuttle sorry for the ping again but how do i define the position of the messages button?

i couldn't get to fix it myself

sorry if its not clear, im using transparency so yeah

[autumn jungle]

using left: -#px; in the first css group.
Just add it in, thats the way i can think of,
just set a number with the #

they might have a cleaner alternative though

[modern shuttle]

"getting quite good" 😭

[modern shuttle]

Modify margin
Also quickshell, arch, skynet and prism detected, uberbased

[pearl condor]

yeahhh babyyy

[pearl condor]

btw what did you mean by uberbased

[modern shuttle]

Ultrabased
Super based
Very based
Megabased

[pearl condor]

so what am i?

[modern shuttle]

valid

[obsidian snow]

sweet

[pearl condor]

thanks

[autumn jungle]

That looks really clean

[autumn jungle]

Idk what any of that is

[modern shuttle]

My 7 discord themes

[autumn jungle]

...
ah...

what do

well
what do the colours mean

[modern shuttle]

The first column is whether it's being actively developed/worked on, second is BD theme publishing

[autumn jungle]

ah

so not saying they're broken, just those two states

i c

please never stop making schizo snippits

[pearl condor]

yeah its not mine anyways, so it should be

[young scaffold]

How did you get your serverlist to look like that by the way? My apologies for using this channel to ask this question

[modern shuttle]

that's just the normal server list

[young scaffold]

On Android? I am on Linux running Vesktop, looks completely different 😮

[azure vale]

that’s just normal desktop

but it’s a group chat not a server