Add files via upload

obs-info-hud/style.css

@@ -0,0 +1,257 @@
+* {
+	--background: RGB(0, 0, 0, 0.75);
+}
+
+body {
+    background-size: cover;
+}
+
+#statusContainer {
+	font-family: 'Metropolis';
+	font-style: italic;
+	font-weight: bold;
+	font-size: 30px;
+	width: 400px;
+	max-width: fit-content;
+	text-align: center;
+	background-color: #D12025;
+	color: white;
+	padding: 10px;
+	border-radius: 10px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+#top,
+#bottom,
+#left,
+#right {
+	background: red;
+	position: fixed;
+}
+
+#left,
+#right {
+	top: 0;
+	bottom: 0;
+	width: 1vw;
+}
+
+#left {
+	left: 0;
+}
+
+#right {
+	right: 0;
+}
+
+#top,
+#bottom {
+	left: 0;
+	right: 0;
+	height: 1vw;
+}
+
+#top {
+	top: 0;
+}
+
+#bottom {
+	bottom: 0;
+}
+
+#recordingRing {
+	visibility: hidden;
+}
+
+#streamingTop,
+#streamingBottom,
+#streamingLeft,
+#streamingRight {
+	background: #8d65c5;
+	position: fixed;
+}
+
+#streamingLeft,
+#streamingRight {
+	top: 0;
+	bottom: 0;
+	width: 1vw;
+}
+
+#streamingLeft {
+	left: 0;
+}
+
+#streamingRight {
+	right: 0;
+}
+
+#streamingTop,
+#streamingBottom {
+	left: 0;
+	right: 0;
+	height: 1vw;
+}
+
+#streamingTop {
+	top: 0;
+}
+
+#streamingBottom {
+	bottom: 0;
+}
+
+
+#streamingRing {
+	visibility: hidden;
+}
+
+#infoContainer {
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+	font-weight: 600;
+	font-size: 30px;
+	text-shadow: 2px 2px 2px #000000;
+	color: rgb(235, 235, 235);
+	z-index: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#bottomBar,
+#topBar,
+#streamInfo,
+#recordInfo {
+	position: absolute;
+	background-color: var(--background);
+	white-space: nowrap;
+	padding: 0px 20px;
+}
+
+#bottomBar {
+	transform: translate(-50%, 0%);
+	text-align: center;
+	left: 50%;
+    bottom: 4vw;
+}
+
+#topBar {
+	transform: translate(-50%, 0%);
+	left: 50%;
+    top: 4vw;
+}
+
+#streamInfo {
+	visibility: hidden;
+	left: 2vw;
+    top: 4vw;
+}
+
+#recordInfo {
+	visibility: hidden;
+	right: 2vw;
+    top: 4vw;
+}
+
+#theMotherOfAllVolumeContainers
+{
+	position: relative;
+	margin-top: 10vw;
+	margin-bottom: 10vw;
+	height: calc(100% - 20vw);
+	width: 4vw;
+	margin-left: 4vw;
+	visibility: hidden;
+}
+
+#volumeMeterContainerLeft, #volumeMeterContainerRight {
+	position: absolute;
+	height: 100%;
+	width: 48%;
+}
+
+#volumeMeterContainerLeft {
+	background-color: var(--background);
+	position: absolute;
+	bottom: 0%;
+}
+
+#volumeMeterContainerRight {
+	background-color: var(--background);
+	right: 0%;
+	bottom: 0%;
+}
+
+#theGreenShitThatsInsideTheOtherContainerLeft,
+#theGreenShitThatsInsideTheOtherContainerRight {
+	background-color: #37d247;
+	position: absolute;
+	bottom: 0%;
+	width: 100%;
+}
+
+#theGreenShitThatsInsideTheOtherContainerLeft {
+	height: 00%;
+}
+
+#theGreenShitThatsInsideTheOtherContainerRight {
+	height: 00%;
+}
+
+#fpsContainer {
+	position: absolute;
+	background-color: var(--background);
+	width: 2vw;
+	height: calc(100% - 20vw);
+	right: 4vw;
+	top: 10vw;
+}
+
+#fpsMeter {
+	background-color: #37d247;
+	position: absolute;
+	bottom: 0%;
+	width: 100%;
+	height: 0%;
+}
+
+#fpsLabel {
+	font-size: 22px;
+	position: absolute;
+	bottom: -10px;
+	left: 50%;
+	transform: translate(-50%, 100%);
+	text-align: center;
+	background-color: var(--background);
+}
+
+#micMuteIcon {
+	visibility: hidden;
+	height: 50%;
+	position: absolute;
+	bottom: 50%;
+	left: 50%;
+	transform: translate(-50%, 50%);
+	opacity: 50%;
+}
+
+.barLabel {
+	font-size: 22px;
+	position: absolute;
+	bottom: -10px;
+	left: 50%;
+	transform: translate(-50%, 100%);
+	background-color: var(--background);
+	width: 100%;
+}
+
+#mainContainer {
+	visibility: hidden;
+	width: 100%;
+	text-align: center;
+}