// Base theme template for reveal.js
/*********************************************
* GLOBAL STYLES *********************************************/
body {
@include bodyBackground(); background-color: $backgroundColor;
}
.reveal {
font-family: $mainFont; font-size: $mainFontSize; font-weight: normal; letter-spacing: -0.02em; color: $mainColor;
}
::selection {
color: $selectionColor; background: $selectionBackgroundColor; text-shadow: none;
}
/*********************************************
* HEADERS *********************************************/
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
margin: $headingMargin; color: $headingColor; font-family: $headingFont; line-height: $headingLineHeight; letter-spacing: $headingLetterSpacing; text-transform: $headingTextTransform; text-shadow: $headingTextShadow;
}
.reveal h1 {
text-shadow: $heading1TextShadow;
}
/*********************************************
* LINKS *********************************************/
.reveal a:not(.image) {
color: $linkColor; text-decoration: none; -webkit-transition: color .15s ease; -moz-transition: color .15s ease; -ms-transition: color .15s ease; -o-transition: color .15s ease; transition: color .15s ease;
}
.reveal a:not(.image):hover { color: $linkColorHover; text-shadow: none; border: none; }
.reveal .roll span:after {
color: #fff; background: darken( $linkColor, 15% );
}
/*********************************************
* IMAGES *********************************************/
.reveal section img {
margin: 15px 0px; background: rgba(255,255,255,0.12); border: 4px solid $mainColor; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear;
}
.reveal a:hover img { background: rgba(255,255,255,0.2); border-color: $linkColor; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/*********************************************
* NAVIGATION CONTROLS *********************************************/
.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {
border-right-color: $linkColor;
}
.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {
border-left-color: $linkColor;
}
.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {
border-bottom-color: $linkColor;
}
.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {
border-top-color: $linkColor;
}
.reveal .controls div.navigate-left.enabled:hover {
border-right-color: $linkColorHover;
}
.reveal .controls div.navigate-right.enabled:hover {
border-left-color: $linkColorHover;
}
.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: $linkColorHover;
}
.reveal .controls div.navigate-down.enabled:hover {
border-top-color: $linkColorHover;
}
/*********************************************
* PROGRESS BAR *********************************************/
.reveal .progress {
background: rgba(0,0,0,0.2);
}
.reveal .progress span { background: $linkColor; -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); }
/*********************************************
* SLIDE NUMBER *********************************************/
.reveal .slide-number {
color: $linkColor;
}