rc3-html-infobeamer/index.css

@font-face {
    font-family: orbitron-bold;
    src: url(assets/Orbitron-Bold.ttf);
}
@font-face {
    font-family: montserrat;
    src: url(assets/Montserrat-Regular.ttf);
}

* { box-sizing: border-box; }

body {
    background: #000;
    color: #FFF;
    font-family: sans-serif;
}

/* === BG === */
#bg-loop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    opacity: 0.2;
}

/* === FAHRPLAN === */
#schedule {
    position: fixed;
    left: 5%;
    right: 5%;
    top: 10%;
    bottom: 10%;
    
    font-family: orbitron-bold;
    font-size: 34px;
}

#schedule .header {
    margin-bottom: 40px;
}

#schedule .list .item {
    margin-bottom: 10px;
}

#schedule .list .item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#schedule .list .item .sub {
    color: #7b7b7b;
    font-size: 26px;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#schedule-here-container {
    position: absolute;
    right: 52%;
    left: 0;
}

#schedule-main-container {
    position: absolute;
    right: 52%;
    left: 0;
    top: 50%;
}

#schedule-other-container {
    position: absolute;
    left: 52%;
    right: 0;
}

#schedule-here-container .header {
    color: #b145fb;
}
#schedule-main-container .header {
    color: #6820e4;
}
#schedule-other-container .header {
    color: #45b5e3;
}


/* === TICKER === */
#bottom-bar {
    position: fixed;
    bottom: 0;
    margin-bottom: 20px;
    font-size: 14px;
    
    width: 100%;
    overflow: hidden;
}
 
#ticker-wrap {
    width: 100%;
    padding-left: 100%; /* Push contents to right side of screen */
}

@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;
}

#ticker > .item{
    display: inline-block; /* Lay items in a horizontal line */
    padding: 10px 36px;
    
    font-size: 22px;
}

#ticker > .item > img {
    height: 32px;
    vertical-align: middle;
}

#ticker > .item > span.user {
    color: #fff;
    margin: 0 20px;
    vertical-align: middle;
}

#ticker > .item > span.content {
    color: #fff;
    vertical-align: middle;
}