Creating Cyberpunk themed overlay from Stromno widget
Custom CSS in OBS Browser source settings allows you to change widgets.
With a Stromno app you can broadcast heart rate data from Apple Watch and share it through the Internet as a unique page. You can use it an overlay in your stream, share with your doctor, trainer, or friends. Create your account here.
In the Stromno Dashboard you can choose a heart and a BPM style and preview your widget. Copy URL and insert it into OBS as a Browser source.
Heart and BPM elements in the Stromno widget have unique IDs to change widget design with a custom CSS in OBS.
Here is an CSS code that will change BPM colour and font, make heart brighter, and will add blue shadow to both heart and BPM.
font-family: "Blender Pro" !important;
text-shadow: 1px 1px 10px #26d8f1;
filter: drop-shadow(3px 3px 5px #26d8f1);
Selector #widget-bpm applies changes to the BPM part of widget. Color is assigned to #eeee34 (yellow), font-family is assigned to Blender Pro (Note, you need to have it installed on your PC), text-shadow adds a blue shadow.
Selector #widget-image applies changes to the heart element. I used Stromno logo heart and added 2 filters: brightness to make it more light yellow, and drop-shadow adds a blue shadow.
I used these colors: #eeee34 (yellow), #26d8f1(blue). Cyberpunk game also has a few other colors, one of them #c56e5d (red). You can choose other color hex codes.