commit 11f9e725da6ae4165894e0c715e199974985bd7a Author: octycs Date: Tue Dec 22 18:54:35 2020 +0100 Initial commit diff --git a/index.css b/index.css new file mode 100644 index 0000000..3762daf --- /dev/null +++ b/index.css @@ -0,0 +1,71 @@ +body { + background: #000; + color: #FFF; + font-family: sans-serif; +} + +#bottom-bar { + position: fixed; + bottom: 0; + /*left: 0;*/ + margin-bottom: 20px; + font-size: 14px; + + overflow: hidden; + /*padding-left: 100%; + box-sizing: content-box;*/ +} + +* { box-sizing: border-box; } + +/* OUTER CONTAINER */ +#bottom-bar { + width: 100%; + overflow: hidden; /* Hide scroll bar */ +} + +/* MIDDLE CONTAINER */ +#ticker-wrap { + width: 100%; + padding-left: 100%; /* Push contents to right side of screen */ +} + +/* INNER CONTAINER */ +@keyframes ticker { + 0% { transform: translate3d(-20%, 0, 0); } + 100% { transform: translate3d(-100%, 0, 0); } +} +#ticker { + /* Basically move items from right side of screen to left in infinite loop */ + display: inline-block; + white-space: nowrap; + padding-right: 100%; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: ticker; + animation-duration: 120s; +} + +/* ITEMS */ +.item{ + display: inline-block; /* Lay items in a horizontal line */ + padding: 10px 36px; + + font-size: 22px; +} + +.item > img { + height: 32px; + vertical-align: middle; +} + +.item > span.user { + color: #fff; + margin: 0 20px; + vertical-align: middle; +} + +.item > span.content { + color: #fff; + vertical-align: middle; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c636367 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + + + rC3 Stream Overlay + + +
+
+
+
+
Helo 1 sadfsa df sa df as df as dfas d f as df as df sa df a sdf asdf as fd sad f sa df sa fd sa fd sa fd sa df sa df asdf sa df sa df s af
+
Helo 2 s adf safd sad fs df sa f sa f sa df sa df sa df a sd f asd f safd sad f safd asfd sadf a sfd sadf asdf a sdf a sdf sa fd
+
+
+
+
+ + + +