OBS Customization for Bingosync

bingosync-list.css

/*
 * Use this as a CSS to convert Bingosync to a list of objectives instead of a 5x5 grid.  Works best for blackout/lockout bingo
 *
 * You'll probably want to make some adjustments to fonts/sizes.
 *
 * I use the following: 
 * Browser Source Size: 732x1470
 * Actual Size: 366x735
 * Crop: 180 Top, 174 Bottom
 * For whatever reason, browser source text looks clearer in OBS/SLOBS if you render it larger than intended and downscale.
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/* .redsquare { background-image: linear-gradient(#dd0000, #aa0000 60%, #880000); } */
body {
    background-color: rgba(0, 0, 0, 0); overflow: hidden; 
    font-size: 40px; line-height: 1.15; /* originally 18px, 1.42857143 */
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
}
.container { width: 100% !important; }
.col-md-6, .fill-parent, .board-container { width: 100% !important; height: 100% !important; }
.col-md-6 { height: calc(100% + 70px) !important; } /* add back the 70px removed by something else */
#bingo tr td { height: 20% !important; border: 2px solid #3d3d3d !important; border-collapse: collapse !important;}
#bingo tr td .bg-color { height: 100%; } /* Otherwise filled-in squares don't render correctly. */
.text-container { 
    padding: 0 !important;
    margin: 0px !important;
    width: calc(100% - 8px) !important;
    text-shadow: -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 2px 2px 0 #000 !important;
    display: inline-block; 
}
td.unselectable.popout,
.container > div:nth-child(1):not(.page-container),
.panel-body > .form-horizontal > div:nth-child(4),
.panel-body > .form-horizontal > div:nth-child(5),
.container > div:nth-child(2) > div:nth-child(2),
#color-chooser {
    display: none; !important
	height: 0px !important;
}

.flex-col-content > div {
    margin: unset !important;
}

.container {
	left: 0px;
	padding: 2px;
}

.fill-parent {
	text-align: unset !important;
}
#bingo { 
	width: 100% !important; 
	height: 100% !important; 
	border-collapse: collapse;
}

.square {
	display: block;
	width: 100%;
     background-color: rgba(0, 0, 0, 0.5);
}

bingosync.css

/*
 * Use this as custom CSS for a Bingosync browser source.
 * 
 * This renders much larger than normal Bingosync, because OBS tends to make text blurry.
 * It looks best as an OBS browser source:
 * Width: 1050, Height: 950
 * Crop Bottom: 30
 * Resize down to about half this size, based on stream layout
 * 
 * Uncomment the below bit to change what red looks like (or use it as an example for changing other colors
 * This entire block of comments can be removed.
 */

/* .redsquare { background-image: linear-gradient(#dd0000, #aa0000 60%, #880000); } */
body {
    background-color: rgba(0, 0, 0, 0); overflow: hidden; 
    font-size: 34px; line-height: 1.1; /* originally 18px, 1.42857143 */
}
.container { width: 100% !important; }
.col-md-6, .fill-parent, .board-container { width: 100% !important; height: 100% !important; }
.col-md-6 { height: calc(100% + 70px) !important; } /* add back the 70px removed by something else */
#bingo tr td { height: 20% !important; border: 4px solid #3d3d3d;}
#bingo tr td .bg-color { height: 100%; } /* Otherwise filled-in squares don't render correctly. */
.text-container { 
    padding: 0 !important;
    margin: 0px !important;
    width: calc(100% - 8px) !important;
    text-shadow: -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 2px 2px 0 #000 !important;
    display: inline-block; 
}
td.unselectable.popout,
.container > div:nth-child(1):not(.page-container),
.panel-body > .form-horizontal > div:nth-child(4),
.panel-body > .form-horizontal > div:nth-child(5),
.container > div:nth-child(2) > div:nth-child(2),
#color-chooser {
    display: none;
}

.flex-col-content > div {
    margin: unset !important;
}

.container {
	left: 0px;
	padding: 2px;
}

.fill-parent {
	text-align: unset !important;
}
#bingo { 
	width: 100% !important; 
	height: 100% !important; 
	border-collapse: collapse;
}