// 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 'defaults'; @import 'fonts'; @import '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 // ——————————- .caption {

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

// Badge // ——————————- .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 // ——————————- .region {

display:none;
}

// Slide // ——————————- .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;
        }
// Number
&:after {
        position:absolute;
        right:0;
        bottom:45px;
        left:0;
        color:#AAA;
        counter-increment:slide;
        content:counter(slide);
        text-align:center;
        line-height:1;
        }
// Inner
> div {
        position:absolute;
        top:0;
        left:0;
        overflow:hidden;
        padding:$top $right 0 $left;
        width:$width - $left - $right;
        height:$height - $top;
        }
}

// Elements // ——————————- .slide {

// Header
h2 {
        margin:0 0 58px;
        font:48px/1 'Open Sans Light', sans-serif;
        }
// Text
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;
        }
// Quote
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;
                }
        }
// Lists
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';
        }
// Code
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
        mark {
                padding:5px 7px 1px;
                &.important {
                        background:$color;
                        color:#FFF;
                        }
                &.comment {
                        padding:0;
                        background:none;
                        color:#AAA;
                        }
                }
        }
// Table
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
&.cover,
&.shout {
        z-index:1;
        &:after {
                content:'';
                }
        }
// Cover
&.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
&.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
.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;
                }
        }
// Notes
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;
        }
}

// Screen @media screen {

// List
.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;
        // Outfit
        .caption,
        .badge {
                display:block;
                }
        // Slide
        .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);
                        }
                // Frame
                &: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);
                                }
                        }
                // Number
                &:after {
                        top:100%;
                        bottom:auto;
                        padding-top:50px;
                        @media (max-width:$break) {
                                width:$width/2;
                                transform-origin:0 0;
                                transform:scale(2);
                                }
                        }
                // Hover
                &:hover:before {
                        box-shadow:
                                0 0 0 1px #EEE,
                                0 0 0 12px rgba(#FFF, 0.5);
                        }
                // Current
                &:target {
                        &:before {
                                box-shadow:
                                        0 0 10px 0 darken($color, 5%),
                                        0 0 0 12px $color;
                                }
                        &:after {
                                color:$color;
                                }
                        }
                // Inner
                > div {
                        &:before {
                                position:absolute;
                                top:0;
                                right:0;
                                bottom:0;
                                left:0;
                                z-index:2;
                                content:'';
                                }
                        }
                // Cover Shout
                &.cover,
                &.shout {
                        &:after {
                                content:counter(slide);
                                }
                        }
                // Notes
                footer {
                        display:block;
                        }
                }
        }
// Full
.shower.full {
        position:absolute;
        top:50%;
        left:50%;
        overflow:hidden;
        margin:(-$height/2) 0 0 (-$width/2);
        width:$width;
        height:$height;
        background:#000;
        // Debug
        &.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
        .region {
                @include offscreen;
                display:block;
                }
        // Slide
        .slide {
                position:absolute;
                top:0;
                left:0;
                margin-left:150%;
                // Next
                .next {
                        visibility:hidden;
                        &.active {
                                visibility:visible;
                                }
                        }
                // Current
                &:target {
                        margin:0;
                        }
                // Shout
                &.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
        .progress {
                position:absolute;
                bottom:0;
                left:0;
                z-index:1;
                width:0;
                height:8px;
                background:$color;
                transition:width 0.2s linear;
                }
        }
}

// Print @page {

margin:0;
size:$width $height;
}