videomail-client/src/styles/styl/main.styl

A wicked npm package to record videos directly in the browser, wohooo!

bright-orange-color = #eb9369
orange-color        = #ea4b2a
green-color         = #00d814

@import 'keyframes/*'

// https://github.com/bfred-it/iphone-inline-video#usage
.IIV::-webkit-media-controls-play-button
.IIV::-webkit-media-controls-start-playback-button
    opacity 0
    pointer-events none
    width 5px

.videomail

    .visuals
        position relative

        video.replay
            width 100%
            height 100%

    .countdown
    .recordTimer
    .recordNote
    .pausedHeader
    .pausedHint
        margin 0
        height auto

    .countdown
    .recordTimer
    .recordNote
    .paused
    .facingMode
    noscript
        position absolute
        z-index 100

    .countdown
    .recordTimer
    .recordNote
    .pausedHeader
    .pausedHint
    noscript
        font-weight bold

    .countdown
    .paused
    noscript
        width       100%
        top         50%
        transform   translateY(-50%)

    .pausedHeader
    .pausedHint
    .countdown
        text-align  center
        letter-spacing 4px
        text-shadow -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white

    .pausedHeader
    .countdown
        opacity   .9
        font-size 460%

    .pausedHint
        font-size 150%

    .facingMode
        right .7em
        bottom .6em
        background rgba(30, 30, 30, .5)
        color rgba(245, 245, 245, .9)
        font-family monospace
        border none
        padding .1em .3em
        font-size 1.2em
        z-index 10
        outline none
        transition all .2s ease

        &:hover
          background rgba(50, 50, 50, .7)
          cursor pointer


    .recordTimer
    .recordNote
        right           .7em
        background      rgba(10, 10, 10, .8)
        padding         .3em .4em
        transition      all 1s ease
        color           green-color
        font-family     monospace
        opacity         .9

        &.near
            color bright-orange-color

        &.nigh
            color orange-color

    .recordTimer
        top .7em

    .recordNote
        top 3.6em

        &:before
            content   "REC"
            animation blink 1s infinite

    .notifier
        overflow   hidden
        box-sizing border-box
        height     100%

    .radioGroup
        display block

    video
        margin-bottom 0