steveseguin / social_stream

Consolidate your live social messaging streams and much more
http://socialstream.ninja/
GNU General Public License v3.0
624 stars 92 forks source link

Custom Color for Alternating Background Shading #125

Open miriambrueckner opened 1 year ago

miriambrueckner commented 1 year ago

Hi there - is it possible to use custom colors for alternating background shading? That would be awesome. I do only understand a little bit of css and cannot figure out the selectors myself. Can you help?

steveseguin commented 1 year ago

If using OBS, you can insert this into the Custom CSS section:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root {
--highlight-base: red!important;
--highlight-base2: green!important;
}
miriambrueckner commented 1 year ago

Awesome and incredible - your answer was laser fast! Can I use transparent color, too? I tried --highlight-base: rgba(255, 255, 255, 0.2)!important; but it does not seem to work.

Am Mi., 9. Aug. 2023 um 22:21 Uhr schrieb Steve Seguin < @.***>:

If using OBS, you can insert this into the Custom CSS section:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root { --highlight-base: red!important; --highlight-base2: green!important; }

— Reply to this email directly, view it on GitHub https://github.com/steveseguin/social_stream/issues/125#issuecomment-1672093267, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF6D3BKQDZ52G2Y4WP4F6TDXUPWNNANCNFSM6AAAAAA3KQJ4AE . You are receiving this because you authored the thread.Message ID: @.***>

steveseguin commented 1 year ago

transparency I think should work,

image

image

ie

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root {
--highlight-base: #F0F4!important;
--highlight-base2: #F0F4!important;
}
miriambrueckner commented 1 year ago

I qould like to have transparent white but cannot get it to work. I tried --highlight-base: #FFF!important; --highlight-base2: #FFF!important; And the result is solid white: image

steveseguin commented 1 year ago

What does it look like if you do #FFF7!important; ?

miriambrueckner commented 1 year ago

Looks like this (does not seem to work)

image
steveseguin commented 1 year ago

I'm not entirely sure at the moment what the solution is, as it's definitely transparent, but I guess the point is that it's darkening still. This could be just how OBS overlays transparencies, or something I'm missing in the CSS; not sure. I'll need to play with things and update you if I find something.

You could pick a solid light blue background color, but I suspect that's not what you want.