rc3-html-infobeamer/index.css

/*
 * This is free and unencumbered software released into the public domain.
 *
 * Anyone is free to copy, modify, publish, use, compile, sell, or
 * distribute this software, either in source code form or as a compiled
 * binary, for any purpose, commercial or non-commercial, and by any
 * means.
 *
 * In jurisdictions that recognize copyright laws, the author or authors
 * of this software dedicate any and all copyright interest in the
 * software to the public domain. We make this dedication for the benefit
 * of the public at large and to the detriment of our heirs and
 * successors. We intend this dedication to be an overt act of
 * relinquishment in perpetuity of all present and future rights to this
 * software under copyright law.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 * OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * For more information, please refer to <http://unlicense.org/>
 */


* { box-sizing: border-box; }

body {
    background: #000;
    color: #FFF;
    font-family: 'Orbitron';
    text-shadow: 3px 3px #000;
}

/* === FAHRPLAN === */
#schedule {
    position: fixed;
    left: 5%;
    right: 5%;
    top: 10%;
    bottom: 10%;
    
    font-family: 'Orbitron';
    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: #9b9b9b;
    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;
}