[Userstyle] CSS theme to hide sensitive content of your account!


Oh… yikes

No one like to show off their sensitive information to the public. Especially when you are doing a livestream like the one above, or visiting https://roblox.com/ in public with a lot of people nearby.

Unlike videos, we can’t just censor those information in realtime, there’s always someone who saw the sensitive information of yours.


To solve this problem, I have made a small userstyle that blurs all the sensitive content related to your account! Here’s a gif showing it in action:
hidecontent

Now, you can visit https://roblox.com/ with confidence and without someone taking a glance of your sensitive information!

This userstyle at the moment blurs the following content:

  • Transactions page
  • Settings page
  • DevEx tab (old one)
  • Robux counter in the Robux dropdown
  • Remaining balance when buying items with Robux
  • Xsolla payment window (buying Robux/buying Premium etc)
  • Phone number input box (in account settings)
    More to come in the future

You can always reveal the blurred content by hovering on top of it, though be aware if someone is nearby!


Source code (styluslang preprocessor)

/* ==UserStyle==
@name           Roblox | Hide Sensitive Content
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Hiding sensitive content to public (e.g. payment, currency, account sensitive settings etc)
@author         7kayoh<git@7kayoh.net>
@preprocessor stylus
@var text blurSize "Blur size (..px)" 15px
@var text unblurDelay "Unblur delay (..s)" 0s
@var text blurDuration "Blur duration (..s)" 0.6s
==/UserStyle== */

censor()
    filter blur(blurSize)
    transition filter 0s, scale 0s
    transition-timing-function cubic-bezier(0,-0.01,.26,.99)
    transition-delay 0
    scale 95%
    
uncensor()
    filter blur(0)
    transition filter blurDuration, scale blurDuration
    transition-timing-function cubic-bezier(0,-0.01,.26,.99)
    transition-delay unblurDelay
    scale 100%

@-moz-document domain("roblox.com")
    #nav-robux-amount {
        display: none
    }
    
    #nav-robux-balance, .modal-footer.text-footer, iframe.xsolla-payment-default, #transactions-page-container, #DeveloperExchangeTab, #phone-text-box, #user-account
        censor()
        
    #nav-robux-balance:hover, .modal-footer.text-footer:hover, iframe.xsolla-payment-default:hover, #transactions-page-container:hover, #DeveloperExchangeTab:hover, #phone-text-box:hover, #user-account:hover
        uncensor()

Enjoy!

11 Likes

As somebody who will be consistently live-streaming Roblox soon this is awesome!

3 Likes

twitch streamers will no longer have to like block their streams (or whatever its called)

1 Like

you should make some keybind to toggle the censor instead of hovering

1 Like