Adding overlay text on any page using CSS

I recently started using Roam Research and got introduced to the Chrome extension Stylus, so I could play around with Roam's theme and adjust it to my liking (dark mode, of course!)

In the process, I realized how powerful Stylus is, and so I started using it to modify other websites look as well (e.g., to center horizontally Google's search results -- more on this at the end!)

I am an instructor and have to present a lot these days for my online lectures. I was using an app called Ecamm Live for this, which would allow me to add overlay text while sharing my screen in my Google Meet meetings. But then I found some performance issues with this app, so I decided to use only my browser to present anything that I have to during my lectures.

Now, for example, I present my notes using Roam Research (rather than PowerPoint slides), and I use Scribble to show what I write on my iPad right there in the browser in real-time. The only thing that I was missing was the ability to add some text overlay on top of any page in with a message like "We will start soon" while students wait for the lecture to start.

I realized that I could do this with Stylus and some good old fashion CSS. So I created a new style and started adding some CSS to see what I could achieve.

After playing around with it, I got pretty much what I needed. This is the CSS snippet that I'm currently using for my messages, but of course, it can be tweaked to whatever you want:

body::before {  
  content: "We will start soon!";
  display: flex;
  align-items: center;
  font-size: 10vw;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  box-shadow: 0px 0px 6px #777;
  padding: 10px 20px 15px;
  top: 40%;
  left: 50%;
  height: 13vw;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}

Basically, you just need to add the above CSS snippet under a new Stylus style. Name the style whatever you want for your own reference (e.g., the name of the message you want to display), choose "URLs starting with" and set it to https:// in the "Applies to" field at the bottom of the extension editor. That should make it available on any website. Then from the Stylus extension icon, you can just toggle the message on and off. And of course, you can duplicate this style for as many messages as you want and easily toggle them from the extension icon.

The result looks something like this:

I have tested it on the websites I use the most, and it works in all of them so far.

Finally, I mentioned that I use Stylus to center the Google search results horizontally as well. I used DuckDuckGo at some point, and I really loved that there is a setting to center the search results. I normally work on a 27'' screen, and I keep my browser window to cover around 80% of that, so I really don't like that I have to turn my head all the way to the left to read the search results from Google.

So here it is a very simple CSS snippet I use with the Stylus extension to accomplish this:

#main, #tsf {
  width: 80%;
  margin: 0 auto;
}

#cnt {
  width: 80%;
  margin: 0 auto;
}

And this is the result:

That's about it, folks. Thanks a lot for reading, and I hope you found this useful!