// Bright theme for Shower HTML presentation engine: github.com/shower/shower // Copyright © 2010–2015 Vadim Makeev, pepelsbey.net // Licensed under MIT license: github.com/shower/shower/wiki/MIT-License

@import 'shower/defaults'; @import 'shower/reset';

.shower {

counter-reset:slide;
font:24px/2 'Open Sans', sans-serif;
@media print {
    text-rendering:geometricPrecision;
    }
a {
    color:$color;
    @include underline(currentColor, 0.09);
    text-decoration:none;
    }
}

.caption {

display:none;
margin:0 0 60px;
padding:0 50px 0 0;
color:#555;
h1 {
    font:50px 'Open Sans Light', sans-serif;
    }
}

.badge {

position:absolute;
top:0;
right:0;
display:none;
overflow:hidden;
visibility:hidden;
width:11em;
height:11em;
line-height:2.5;
font-size:15px;
}
.badge a {
    position:absolute;
    bottom:50%;
    right:-50%;
    left:-50%;
    visibility:visible;
    background:$color;
    color:#FFF;
    text-align:center;
    transform-origin:50% 100%;
    transform:rotate(45deg) translateY(-1em);
    }

.region {

display:none;
}

.slide {

position:relative;
width:$width;
height:$height;
background:#FFF;
color:#000;
-webkit-print-color-adjust:exact;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
@media print {
    page-break-before:always;
    }
&:after {
    position:absolute;
    right:0;
    bottom:45px;
    left:0;
    color:#AAA;
    counter-increment:slide;
    content:counter(slide);
    text-align:center;
    line-height:1;
    }
> div {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    padding:$top $right 0 $left;
    width:$width - $left - $right;
    height:$height - $top;
    }
}

.slide {

h2 {
    margin:0 0 58px;
    font:48px/1 'Open Sans Light', sans-serif;
    }
p {
    margin:0 0 48px;
    }
p.note {
    color:#AAA;
    }
b, strong {
    font-weight:bold;
    }
i, em {
    font-style:italic;
    }
code, kbd, samp {
    padding:5px 7px 1px;
    background:rgba(#000, 0.08);
    color:#000;
    line-height:1;
    font-family:'Anka Coder', monospace;
    }
mark {
    padding:2px 7px;
    background:$yellow;
    color:#000;
    }
sub, sup {
    position: relative;
    line-height:0;
    font-size:75%;
    }
sub {
    bottom:-0.25em;
    }
sup {
    top:-0.5em;
    }
blockquote {
    font-style:italic;
    &:before {
        position:absolute;
        margin:-49px 0 0 -100px;
        color:#DDD;
        content:'\201C';
        line-height:1;
        font-size:200px;
        }
    & + figcaption {
        margin:-48px 0 48px;
        font-style:italic;
        font-weight:bold;
        }
    }
ol, ul {
    margin:0 0 48px;
    counter-reset:list;
    li {
        text-indent:-2em;
        &:before {
            display:inline-block;
            width:2em;
            color:#AAA;
            text-align:right;
            }
        }
    ol, ul {
        margin:0 0 0 2em;
        }
    }
ul > li:before {
    content:'\2022\00A0\00A0\2009';
    }
ul > li:lang(ru):before {
    content:'\2014\00A0\2009';
    }
ol > li:before {
    counter-increment:list;
    content:counter(list)'.\00A0\2009';
    }
pre {
    margin:0 0 45px;
    padding:3px 0 0;
    counter-reset:code;
    white-space:normal;
    tab-size:4;
    code {
        display:block;
        padding:0;
        background:none;
        white-space:pre;
        line-height:2;
        &:before {
            position:absolute;
            margin-left:-50px;
            color:#AAA;
            counter-increment:code;
            content:counter(code, decimal-leading-zero)'.';
            }
        &:only-child:before {
            content:'';
            }
        }
    mark {
        padding:5px 7px 1px;
        &.important {
            background:$color;
            color:#FFF;
            }
        &.comment {
            padding:0;
            background:none;
            color:#AAA;
            }
        }
    }
table {
    margin:0 0 50px;
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    th, td {
        @include underline($color, 0.055);
        }
    th {
        text-align:left;
        font-weight:bold;
        }
    &.striped {
        tr:nth-child(even) {
            background:mix($color, #FFF, 8%);
            }
        }
    }
&.cover,
&.shout {
    z-index:1;
    &:after {
        content:'';
        }
    }
&.cover {
    background:#000;
    @mixin cover {
        img, svg, video,
        object, canvas, iframe {
            @content;
            }
        }
    @include cover {
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
        }
    &.w {
        @include cover {
            top:50%;
            width:100%;
            transform:translateY(-50%);
            }
        }
    &.h {
        @include cover {
            left:50%;
            height:100%;
            transform:translateX(-50%);
            }
        }
    &.w.h {
        @include cover {
            top:0;
            left:0;
            transform:none;
            }
        }
    }
&.shout {
    background:$color;
    h2 {
        position:absolute;
        top:50%;
        left:128px;
        right:96px;
        color:#FFF;
        font-size:100px;
        transform:translateY(-50%);
        a {
            @include underline(currentColor, 0.055);
            color:#FFF;
            }
        }
    }
.place {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    &.t.l, &.t.r, &.b.r, &.b.l {
        transform:none;
        }
    &.t, &.b {
        transform:translate(-50%, 0);
        }
    &.l, &.r {
        transform:translate(0, -50%);
        }
    &.t, &.t.l, &.t.r {
        top:0;
        }
    &.r {
        right:0;
        left:auto;
        }
    &.b, &.b.r, &.b.l {
        top:auto;
        bottom:0;
        }
    &.l {
        left:0;
        }
    }
footer {
    position:absolute;
    left:0;
    right:0;
    bottom:-$height;
    z-index:1;
    display:none;
    padding:21px $right 4px $left;
    background:$yellow;
    box-shadow:0 0 0 2px rgba(#000, 0.05);
    transition:bottom 0.3s;
    p {
        margin:0 0 16px;
        }
    mark {
        background:rgba(#FFF, 0.7);
        }
    }
&:hover footer {
    bottom:0;
    }
}

@media screen {

.shower.list {
    position:absolute;
    clip:rect(0, auto, auto, 0); // Having fun with IE10
    padding:50px 0 50px 50px;
    background:desaturate(lighten($color, 30%), 60%);
    text-align:center;
    .caption,
    .badge {
        display:block;
    }
    .slide {
        // Gap between slides
        $gap:50px;
        position:relative;
        top:$height/2 - $gap;
        display:inline-block;
        margin:($gap - $height/2) ($gap - $width/2) 0 0;
        text-align:left;
        transform-origin:0 0;
        transform:scale(0.5);
        @media (max-width:$break) {
            top:$height/2 + $height/4 - $gap;
            margin:($gap - ($height/2 + $height/4)) ($gap - ($width/2 + $width/4)) 0 0;
            transform:scale(0.25);
            }
        &:before {
            position:absolute;
            top:0;
            left:0;
            z-index:-1;
            width:$width/2;
            height:$height/2;
            box-shadow:0 0 0 1px #DDD;
            content:'';
            transform-origin:0 0;
            transform:scale(2);
            @media (max-width:$break) {
                width:$width/4;
                height:$height/4;
                transform:scale(4);
                }
            }
        &:after {
            top:100%;
            bottom:auto;
            padding-top:50px;
            @media (max-width:$break) {
                width:$width/2;
                transform-origin:0 0;
                transform:scale(2);
                }
            }
        &:hover:before {
            box-shadow:
                0 0 0 1px #EEE,
                0 0 0 12px rgba(#FFF, 0.5);
            }
        &:target {
            &:before {
                box-shadow:
                    0 0 10px 0 darken($color, 5%),
                    0 0 0 12px $color;
                }
            &:after {
                color:$color;
                }
            }
        > div {
            &:before {
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                left:0;
                z-index:2;
                content:'';
            }
        }
        &.cover,
        &.shout {
            &:after {
                content:counter(slide);
                }
            }
        // Notes
        footer {
            display:block;
            }
        }
    }
.shower.full {
    position:absolute;
    top:50%;
    left:50%;
    overflow:hidden;
    margin:(-$height/2) 0 0 (-$width/2);
    width:$width;
    height:$height;
    background:#000;
    &.debug:after {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:2;
        background:url(../images/grid-#{$ratio}.svg) no-repeat;
        content:'';
    }
    .region {
        @include offscreen;
        display:block;
    }
    .slide {
        position:absolute;
        top:0;
        left:0;
        margin-left:150%;
        .next {
            visibility:hidden;
            &.active {
                visibility:visible;
                }
            }
        &:target {
            margin:0;
            }
        &.shout {
            &.right, &.up {
                h2 {
                    opacity:0;
                    transition:all 0.4s ease-out;
                    }
                &:target h2 {
                    opacity:1;
                    transform:translateX(0) translateY(-50%);
                    }
                }
            &.right h2 {
                transform:translateX(-100%) translateY(-50%);
                }
            &.up h2 {
                transform:translateX(0) translateY(100%);
                }
            }
        }
    .progress {
        position:absolute;
        bottom:0;
        left:0;
        z-index:1;
        width:0;
        height:8px;
        background:$color;
        transition:width 0.2s linear;
        }
    }
}

@page {

margin:0;
size:$width $height;

}