offline-theme-chrome.sass

@import compass/css3

@import mixins
@import keyframes

@import offline-theme-base

$green: #80d580
$red: #ec8787

+keyframes-offline-dropin
+keyframes-offline-dropout

+keyframes-offline-rotation

.offline-ui
    +box-shadow(0 0 0 1px rgba(0, 0, 0, .15), 0 0 1em rgba(0, 0, 0, .3))
    font-family: "Lucida Grande", sans-serif
    font-size: 14px
    padding: 1em
    width: 38em
    max-width: 100%
    background: #f6f6f6
    color: #444
    overflow: hidden

    .offline-ui-content
        padding-left: 2em

        &:before
            line-height: 1.25em

        &:after
            +border-radius(50%)
            content: " "
            display: block
            position: absolute
            top: 0
            bottom: 0
            left: 1em
            margin: auto
            height: 1em
            width: 1em

    .offline-ui-retry
        +box-shadow(0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75))
        +border-radius(2px)
        +background-image(linear-gradient(#ededed, #ededed 38%, #dedede))
        position: absolute
        right: 4em
        top: 1em
        bottom: 1em
        border: 1px solid rgba(0, 0, 0, 0.25)
        text-shadow: 0 1px 0 #f0f0f0
        padding: 0 1em
        line-height: 1.6em
        height: 1.7em
        margin: auto
        font-size: 12px
        text-decoration: none
        color: inherit

    &.offline-ui-up
        +offline-animation(offline-dropout forwards .5s 2s)

        .offline-ui-content:after
            background: $green

    &.offline-ui-down
        +offline-animation(offline-dropin .5s)

        .offline-ui-content:after
            background: $red

        &.offline-ui-connecting, &.offline-ui-waiting
            padding-right: 3em

            .offline-ui-content:after
                background: $red

            &:after
                +offline-animation(offline-rotation .7s linear infinite)
                +border-radius(50%)
                content: " "
                display: block
                position: absolute
                right: 1em
                top: 0
                bottom: 0
                margin: auto
                height: 1em
                width: 1em
                border: 2px solid rgba(0, 0, 0, 0)
                border-top-color: rgba(0, 0, 0, .5)
                border-left-color: rgba(0, 0, 0, .5)
                opacity: 0.7

        &.offline-ui-waiting
            padding-right: 11em

            &.offline-ui-reconnect-failed-2s
                padding-right: 0