myTerminal/subtitles-player

@import '../../node_modules/effortless-css/less/all.less';

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto;
    font-weight: bold;
    src: url(../fonts/Roboto-Bold.ttf);
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    body {
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
        background-color: #000;
        color: #fff;
        font-family: Roboto;

        #stage-container {
            width: 100%;
            height: 100%;
            display: table;

            #stage {
                display: table-cell;
                vertical-align: middle;
                width: 100%;
                height: 100%;
                text-align: center;
                font-family: Arial;

                &:hover {
                    cursor: pointer;
                    background: #00ff00;
                }
            }
        }

        #subtitles-container {
            display: none;
            height: 100%;

            #subtitles {
                height: 100%;

                .subtitle {
                    .box-sizing(border-box);
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    font-size: 30px;
                    display: table;

                    span {
                        display: table-cell;
                        vertical-align: middle;
                    }

                    &.title {
                        font-size: 42px;
                        font-weight: bold;
                    }
                }

                &.fade {

                    .subtitle {
                        .opacity(0);
                        .transition(1s opacity);

                        &.visible {
                            .opacity(1);
                        }
                    }
                }
            }

            #play-button {
                position: absolute;
                bottom: 20%;
                z-index: 2;
                width: 100%;
                text-align: center;
                .box-sizing(border-box);
                cursor: pointer;
                height: 50px;
                line-height: 50px;

                &:hover {
                    box-shadow: 0 0 20px #fff;
                }
            }
        }

        &.playback-mode {

            #stage-container {
                display: none;
            }

            #subtitles-container {
                display: block;
            }
        }
    }
}