myTerminal/faded-presenter

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

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

    body {
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
        overflow: hidden;
        background-color: #DDD;

        #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;
                cursor: default;

                &:hover {
                    background: #00FF00;
                }
            }
        }

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

            #presentation {
                .box-sizing(border-box);
                .perspective(500px);
                height: 100%;
                padding: 10px;

                .slide {
                    .box-sizing(border-box);
                    margin: 0 auto;
                    max-width: 960px;
                    overflow-y: scroll;
                    background-color: #FFF;

                    height: 0;
                    padding: 0;
                    border: none;
                    box-shadow: none;

                    &.visible {
                        padding: 25px 50px;
                        height: 100%;
                        border: 1px solid #FFF;
                        box-shadow: 0 0 5px #888;
                    }
                }

                &.fade {

                    .slide {
                        .transition(1s opacity);

                        .opacity(0);

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

                &.slide-up {

                    .slide {
                        .transition(1s);

                        padding: 0px 50px;
                        .opacity(0);

                        &.visible {
                            padding: 25px 50px;
                            .opacity(1);
                        }
                    }
                }

                &.unfold-down {

                    .slide {
                        .transition(0.5s transform, 0.5s opacity;);
                        .transform-origin(0% 0%);

                        .opacity(0);
                        .transform(scaleY(0));

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

                &.unfold-up {

                    .slide {
                        .transition(0.5s transform, 0.5s opacity;);
                        .transform-origin(0% 100%);

                        .opacity(0);
                        .transform(scaleY(0));

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

                &.zoom {

                    .slide {
                        .transition(0.5s transform, 0.5s opacity;);

                        .transform(scale(0.5));

                        &.visible {
                            .transform(scale(1));
                        }
                    }
                }

                &.flip {

                    .slide {
                        .transition(0.5s transform, 0.5s opacity;);

                        .transform(rotate3d(0, 1, 0, 180deg));

                        &.visible {
                            .transform(rotate3d(0, 0, 0, 0deg));
                        }
                    }
                }

                .footer {
                    border-top: 1px solid #000;
                    display: none;
                    text-align: center;
                }
            }

            #soft-edge {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                padding-top: 10px;

                #overlays {
                    position: relative;
                    width: 100%;
                    height: 100px;
                    margin-top: 20px;
                    background-color: Black;
                    .opacity(0.7);
                    .transition(0.5s);
                    box-shadow: 0 0 20px Black;

                    #presentation-controls-overlay {
                        position: relative;
                        width: 100%;
                        height: 50px;

                        .controls-button {
                            float: left;
                            margin: 10px;
                            margin-right: 0;
                            padding: 5px;
                            height: 30px;
                            line-height: 16px;
                            border: 2px solid White;
                            .round-borders(5px);
                            .transition(0.5s);
                            cursor: pointer;
                            color: #fff;

                            &:last-child {
                                margin-right: 10px;
                            }

                            &:hover {
                                background-color: #808080;
                            }

                            &.active {
                                background-color: #FFF;
                                color: #000;
                            }

                            &.disabled {
                                cursor: default;
                            }

                            .animation-control {

                            }
                        }

                        .controls-separator {
                            float: left;
                            height: 30px;
                            width: 3px;
                            margin: 10px;
                            margin-right: 0;
                            background-color: #fff;
                            .round-borders(1px);
                        }
                    }

                    #presentation-progress-overlay {
                        position: relative;
                        width: 100%;
                        height: 50%;

                        #presentation-progress-bar {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 0%;
                            height: 100%;
                            background-color: Green;
                            .opacity(0.5);
                            .transition(0.5s);
                        }

                        #presentation-progress-text-container {
                            display: table;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;

                            #presentation-progress-text {
                                display: table-cell;
                                vertical-align: middle;
                                text-align: center;
                                color: White;
                            }
                        }
                    }
                }

                &:hover, &.hovered {
                    #overlays {
                        margin-top: -100px;
                    }
                }
            }
        }

        #presenter-view-starter {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #888;
            color: #fff;
            text-align: center;
            line-height: 50px;
            border-bottom-right-radius: 50%;
            cursor: pointer;
            .opacity(0);
            .transition(1s);

            &:hover {
                .opacity(1);
            }
        }

        #presenter-view-container {
            display: none;

            #presenter-view {
                font-size: 0.5em;
                background-color: #fff;

                .slide {
                    padding: 5px;
                    border: 1px solid #777;
                    .opacity(0.3);

                    img {
                        display: none;
                    }

                    h1,
                    h2,
                    h3 {
                        display: block;
                        margin: 0;
                        padding: 0;
                    }

                    &.active {
                        background: #ddd;
                        border-color: #0f0;
                        .opacity(1);

                        &+ .slide {
                            .opacity(1);
                        }
                    }
                }
            }
        }

        &.presentation-mode {

            #stage-container {
                display: none;
            }

            #presentation-container {
                display: block;
            }
        }

        &.presenter-view-mode {
            overflow: inherit;

            #stage-container {
                display: none;
            }

            #presenter-view-starter {
                display: none;
            }

            #presenter-view-container {
                display: block;
            }
        }
    }

    @media print {
        height: auto;

        body {
            height: auto;
            overflow: visible;
            background-color: transparent;

            #presentation-container {

                #presentation {

                    .slide {
                        height: auto;
                        padding: 0 !important;
                        .opacity(1) !important;
                        overflow: visible !important;
                        box-shadow: none !important;
                        border: none !important;
                        .transform(none) !important;

                        &.last-slide {
                            height: 0;
                            .opacity(0);
                        }
                    }

                    .footer {
                        display: inherit;
                    }
                }

                #soft-edge {
                    display: none;
                }
            }
        }
    }
}