tvgids/style.sass

$indicator-color: red
$hour-width: 200px
$channel-height: 34px
$header-height: 64px
$channel-label-width: 180px

html, body
    width: 100%
    height: 100%
    overflow: hidden
    margin: 0
    padding: 0

.navbar
    background-color: #232323
    width: 100%
    position: fixed
    top: 0

    .navitem
        color: #9a9a9a
        text-decoration: none
        font: normal 13px/18px Helvetica
        display: inline-block
        padding: 10px 20px

        &:hover
            color: #bcbcbc

        &.active
            color: #fff
            background-color: #1a1a1a

        &.disabled
            color: #666
            cursor: default

.guide
    width: 100%
    max-height: 100%
    overflow-x: scroll
    position: relative
    -webkit-overflow-scrolling: touch

    .scroll-wrapper
        width: 100%
        height: 100%
        position: relative

.timeline-bg
    width: 100%
    height: 21px
    top: 38px
    position: fixed
    position: fixed
    background-color: #fdfdfd

.timeline
    width: 24 * $hour-width
    height: 26px
    position: absolute
    top: 38px
    background-color: #fdfdfd
    margin-left: $channel-label-width - 1px

    .hour
        font: normal 13px Helvetica
        float: left
        width: $hour-width - 7px
        border-left: 1px solid #444
        padding: 5px 0 0 6px
        height: 20px

    //.label
    //    width: 50px
    //    margin-left: -25px
    //    text-align: center

.channels
    margin: $header-height 0 0 ($channel-label-width - 1px)
    width: 24 * $hour-width
    overflow: hidden

.channel
    position: relative
    height: $channel-height

    .program
        position: absolute
        white-space: nowrap
        height: $channel-height - 10px
        padding: 8px 0 0 8px
        border-left: 1px solid white
        border-right: 1px solid white
        background-color: #eee
        font: normal 13px/15px Helvetica
        overflow: hidden
        color: #555

        &.past
            background-color: #ececec
            color: #aaa

        &.current
            background-color: #ddd
            color: #444

        .favlink
            position: absolute
            right: 10px
            top: 10px
            visibility: hidden
            color: #fff
            cursor: pointer

            &:hover
                color: #bcbcbc

        &:hover .favlink
            visibility: visible

        &.favourite
            background-color: rgb(250, 218, 160)

            .favlink
                color: orange
                visibility: visible

            &.past
                background-color: rgba(250, 218, 160, 0.5)
                color: rgb(131, 131, 131)

                .favlink
                    color: rgba(255, 165, 0, 0.5)

.indicator
    position: absolute
    width: 1px
    height: 100%
    top: $header-height
    background-color: $indicator-color

.channel-labels
    width: $channel-label-width - 2px
    position: absolute
    top: $header-height
    left: 0
    border-right: 2px solid #fff

    .label
        width: $channel-label-width - 13px
        background-color: #e5e5e5
        color: #666
        font: bold 13px/15px Helvetica
        padding: 8px 10px 0 0
        text-align: right
        height: $channel-height - 10px
        margin-bottom: 2px
        border-right: 1px solid #bbb

.select-channels
    margin-top: 38px

    label
        padding: 5px
        margin: 4px 4px 0 0
        display: inline-block
        background-color: #f1f1f1

        &.disabled
            opacity: 0.5

    button
        margin: 6px 0 6px 6px

$loader-size: 66px

.loading-screen, .program-details
    display: none
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0

    .bg
        width: 100%
        height: 100%
        background-color: #000
        opacity: 0.8

.loading-screen .loader
    position: absolute
    width: $loader-size
    height: $loader-size
    top: 50%
    left: 50%
    margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
    background: url("loading.gif") no-repeat left top

$details-width: 480px

.program-details .content
    position: absolute
    background: white
    top: 50%
    left: 50%
    width: $details-width
    margin: -150px 0 0 (-$details-width / 2)
    border-radius: 6px
    padding: 10px 15px
    font: 12px/18px Helvetica
    box-shadow: 0 0 7px 5px #0f0f0f

    .properties
        padding-left: 15px
        margin-top: 1px

        strong
            display: inline-block
            width: 70px