From be4c55cd6509d57cd49718c347209eaa9fd5e397 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 19:49:44 -0500 Subject: add night theme --- css/theme/night.css | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 css/theme/night.css (limited to 'css/theme/night.css') diff --git a/css/theme/night.css b/css/theme/night.css new file mode 100644 index 0000000..4c1f824 --- /dev/null +++ b/css/theme/night.css @@ -0,0 +1,150 @@ +@import url(http://fonts.googleapis.com/css?family=Montserrat:700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +/** + * Black theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #111111; + background-color: #111111; +} + +.reveal { + font-family: "Open Sans", Times, "Times New Roman", serif; + font-size: 30px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eeeeee; +} + +::selection { + color: white; + background: #e7ad52; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "Montserrat", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: -0.03em; + text-transform: none; + text-shadow: none; +} + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #e7ad52; + 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: #f3d7ac; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #d08a1d; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + 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: #e7ad52; + 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: #e7ad52; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #e7ad52; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #e7ad52; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #e7ad52; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #f3d7ac; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #f3d7ac; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #f3d7ac; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #f3d7ac; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.reveal .progress span { + background: #e7ad52; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} -- cgit v1.2.3 From 519ee26809bfd6bd824155e999d2c9eaae6786bb Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Nov 2012 09:23:23 -0500 Subject: remove left/right margin from images, tweak pdf print styles --- css/print/pdf.css | 1 + css/theme/beige.css | 2 +- css/theme/default.css | 2 +- css/theme/night.css | 2 +- css/theme/serif.css | 2 +- css/theme/simple.css | 2 +- css/theme/sky.css | 2 +- css/theme/template/theme.scss | 30 +++++++++++++++--------------- 8 files changed, 22 insertions(+), 21 deletions(-) (limited to 'css/theme/night.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index f0c20b7..2d93324 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -85,6 +85,7 @@ ul, ol, div, p { left: auto; top: auto; margin-left: auto; + margin-right: auto; margin-top: auto; padding: auto; diff --git a/css/theme/beige.css b/css/theme/beige.css index c8d38f2..d9f8501 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -90,7 +90,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid #333333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/default.css b/css/theme/default.css index 30d7463..86e65ce 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -90,7 +90,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid #eeeeee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/night.css b/css/theme/night.css index 4c1f824..f10598f 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -77,7 +77,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid #eeeeee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/serif.css b/css/theme/serif.css index 3d406af..aaabf47 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -77,7 +77,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/simple.css b/css/theme/simple.css index cf4f042..a68729f 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -79,7 +79,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/sky.css b/css/theme/sky.css index 43bb4f4..a1b3b96 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -83,7 +83,7 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px; + margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid #333333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index a818ec2..96148e3 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -17,21 +17,21 @@ body { color: $mainColor; } -::selection { - color: $selectionColor; - background: $selectionBackgroundColor; - text-shadow: none; +::selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; } /********************************************* * HEADERS *********************************************/ -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4, -.reveal h5, +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, .reveal h6 { margin: 0 0 20px 0; color: $headingColor; @@ -39,7 +39,7 @@ body { font-family: $headingFont; line-height: $headingLineHeight; letter-spacing: $headingLetterSpacing; - + text-transform: $headingTextTransform; text-shadow: $headingTextShadow; } @@ -65,7 +65,7 @@ body { } .reveal a:not(.image):hover { color: $linkColorHover; - + text-shadow: none; border: none; } @@ -81,12 +81,12 @@ body { *********************************************/ .reveal section img { - margin: 15px; + 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; @@ -97,7 +97,7 @@ body { .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); } -- cgit v1.2.3