From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/themes/style/neon.css | 123 ++++++++++++ deck.js/themes/style/neon.scss | 155 +++++++++++++++ deck.js/themes/style/swiss.css | 84 ++++++++ deck.js/themes/style/swiss.scss | 107 ++++++++++ deck.js/themes/style/web-2.0.css | 192 ++++++++++++++++++ deck.js/themes/style/web-2.0.scss | 250 ++++++++++++++++++++++++ deck.js/themes/transition/fade.css | 43 ++++ deck.js/themes/transition/fade.scss | 69 +++++++ deck.js/themes/transition/horizontal-slide.css | 76 +++++++ deck.js/themes/transition/horizontal-slide.scss | 90 +++++++++ deck.js/themes/transition/vertical-slide.css | 94 +++++++++ deck.js/themes/transition/vertical-slide.scss | 112 +++++++++++ 12 files changed, 1395 insertions(+) create mode 100644 deck.js/themes/style/neon.css create mode 100644 deck.js/themes/style/neon.scss create mode 100644 deck.js/themes/style/swiss.css create mode 100644 deck.js/themes/style/swiss.scss create mode 100644 deck.js/themes/style/web-2.0.css create mode 100644 deck.js/themes/style/web-2.0.scss create mode 100644 deck.js/themes/transition/fade.css create mode 100644 deck.js/themes/transition/fade.scss create mode 100644 deck.js/themes/transition/horizontal-slide.css create mode 100644 deck.js/themes/transition/horizontal-slide.scss create mode 100644 deck.js/themes/transition/vertical-slide.css create mode 100644 deck.js/themes/transition/vertical-slide.scss (limited to 'deck.js/themes') diff --git a/deck.js/themes/style/neon.css b/deck.js/themes/style/neon.css new file mode 100644 index 0000000..aaaeb93 --- /dev/null +++ b/deck.js/themes/style/neon.css @@ -0,0 +1,123 @@ +.deck-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + font-size: 1.75em; + color: #aaa; + background: #000; +} +.deck-container .slide { + background: #000; +} +.deck-container .slide h1 { + color: #0af; + font-weight: normal; + font-weight: 100; + text-shadow: 0 0 50px #0af, 0 0 3px #fff; +} +.deck-container .slide h2 { + color: #af0; + border-bottom-color: #ccc; + font-weight: normal; + font-weight: 100; + text-shadow: 0 0 15px #af0, 0 0 2px #fff; + border-bottom: 1px solid #333; +} +.deck-container .slide h3 { + color: #fff; + font-weight: normal; + font-weight: 100; + text-shadow: 0 0 10px #fff, 0 0 2px #fff; +} +.deck-container .slide pre { + border-color: #333; +} +.deck-container .slide pre code { + color: #fff; +} +.deck-container .slide code { + color: #f0a; +} +.deck-container .slide blockquote { + font-size: 2em; + padding: 1em 2em; + color: #fff; + border-left: 5px solid #fff; +} +.deck-container .slide blockquote p { + margin: 0; +} +.deck-container .slide blockquote cite { + font-size: .5em; + font-style: normal; + font-weight: normal; + font-weight: 100; + color: #aaa; + text-shadow: 0 0 15px #fff, 0 0 2px #fff; +} +.deck-container .slide ::-moz-selection { + background: #a0f; +} +.deck-container .slide ::selection { + background: #a0f; +} +.deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited { + color: #f0a; + text-decoration: none; +} +.deck-container .slide a:hover, .deck-container .slide a:focus { + text-decoration: underline; +} +.deck-container .deck-prev-link, .deck-container .deck-next-link { + background: #f0a; + text-shadow: 0 0 3px #fff; +} +.deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited { + color: #fff; +} +.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus { + text-decoration: none; +} +.boxshadow .deck-container .deck-prev-link:hover, .boxshadow .deck-container .deck-prev-link:focus, .boxshadow .deck-container .deck-next-link:hover, .boxshadow .deck-container .deck-next-link:focus { + -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + box-shadow: 0 0 20px #f0a, 0 0 5px #fff; +} +.deck-container > .slide .deck-before, .deck-container > .slide .deck-previous { + opacity: 0.4; +} +.deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous { + opacity: 1; +} +.deck-container > .slide .deck-child-current { + opacity: 1; +} +.deck-container .deck-status { + font-size: 0.6666em; +} +.deck-container .goto-form { + background: #000; + border: 1px solid #f0a; +} +.deck-container .goto-form label { + color: #fff; +} +.deck-container.deck-menu .slide { + background: #333; +} +.deck-container.deck-menu .deck-current { + background: #444; +} +.boxshadow .deck-container.deck-menu .deck-current { + background: #000; + -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + box-shadow: 0 0 20px #f0a, 0 0 5px #fff; +} +.no-touch .deck-container.deck-menu .slide:hover { + background: #444; +} +.no-touch.boxshadow .deck-container.deck-menu .slide:hover { + background: #000; + -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff; + box-shadow: 0 0 20px #f0a, 0 0 5px #fff; +} diff --git a/deck.js/themes/style/neon.scss b/deck.js/themes/style/neon.scss new file mode 100644 index 0000000..d44babf --- /dev/null +++ b/deck.js/themes/style/neon.scss @@ -0,0 +1,155 @@ +.deck-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + font-size:1.75em; + color:#aaa; + background:#000; + + .slide { + background:#000; + + h1 { + color:#0af; + font-weight:normal; + font-weight:100; + text-shadow:0 0 50px #0af, 0 0 3px #fff; + } + + h2 { + color:#af0; + border-bottom-color:#ccc; + font-weight:normal; + font-weight:100; + text-shadow:0 0 15px #af0, 0 0 2px #fff; + border-bottom:1px solid #333; + } + + h3 { + color:#fff; + font-weight:normal; + font-weight:100; + text-shadow:0 0 10px #fff, 0 0 2px #fff; + } + + pre { + border-color:#333; + + code { + color:#fff; + } + } + + code { + color:#f0a; + } + + blockquote { + font-size:2em; + padding:1em 2em; + color:#fff; + border-left:5px solid #fff; + + p { + margin:0; + } + + cite { + font-size:.5em; + font-style:normal; + font-weight:normal; + font-weight:100; + color:#aaa; + text-shadow:0 0 15px #fff, 0 0 2px #fff; + } + } + + ::-moz-selection{ background:#a0f; } + ::selection { background:#a0f; } + + a { + &, &:hover, &:focus, &:active, &:visited { + color:#f0a; + text-decoration:none; + } + + &:hover, &:focus { + text-decoration:underline; + } + } + } + + .deck-prev-link, .deck-next-link { + background:#f0a; + text-shadow:0 0 3px #fff; + + &, &:hover, &:focus, &:active, &:visited { + color:#fff; + } + + &:hover, &:focus { + text-decoration:none; + + .boxshadow & { + -webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + box-shadow:0 0 20px #f0a, 0 0 5px #fff; + } + } + } + + > .slide { + .deck-before, .deck-previous { + opacity:0.4; + + &:not(.deck-child-current) { + .deck-before, .deck-previous { + opacity:1; + } + } + } + + .deck-child-current { + opacity:1; + } + } + + .deck-status { + font-size:0.6666em; + } + + .goto-form { + background:#000; + border:1px solid #f0a; + + label { + color:#fff; + } + } + + &.deck-menu { + .slide { + background:#333; + } + + .deck-current { + background:#444; + + .boxshadow & { + background:#000; + -webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + box-shadow:0 0 20px #f0a, 0 0 5px #fff; + } + } + + .no-touch & .slide:hover { + background:#444; + } + + .no-touch.boxshadow & .slide:hover { + background:#000; + -webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + -moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff; + box-shadow:0 0 20px #f0a, 0 0 5px #fff; + } + } +} diff --git a/deck.js/themes/style/swiss.css b/deck.js/themes/style/swiss.css new file mode 100644 index 0000000..64f76ac --- /dev/null +++ b/deck.js/themes/style/swiss.css @@ -0,0 +1,84 @@ +.deck-container { + font-family: "Helvetica Neue", sans-serif; + font-size: 1.75em; + background: #fff; +} +.deck-container .slide { + background: #fff; +} +.deck-container .slide h1 { + color: #000; +} +.deck-container .slide h2 { + color: #c00; + border-bottom-color: #ccc; +} +.deck-container .slide h3 { + color: #888; +} +.deck-container .slide pre { + border-color: #ccc; +} +.deck-container .slide code { + color: #888; +} +.deck-container .slide blockquote { + font-size: 2em; + font-style: italic; + padding: 1em 2em; + color: #000; + border-left: 5px solid #ccc; +} +.deck-container .slide blockquote p { + margin: 0; +} +.deck-container .slide blockquote cite { + font-size: .5em; + font-style: normal; + font-weight: bold; + color: #888; +} +.deck-container .slide ::-moz-selection { + background: #c00; + color: #fff; +} +.deck-container .slide ::selection { + background: #c00; + color: #fff; +} +.deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited { + color: #c00; + text-decoration: none; +} +.deck-container .slide a:hover, .deck-container .slide a:focus { + text-decoration: underline; +} +.deck-container > .slide .deck-before, .deck-container > .slide .deck-previous { + opacity: 0.4; +} +.deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous { + opacity: 1; +} +.deck-container > .slide .deck-child-current { + opacity: 1; +} +.deck-container .deck-prev-link, .deck-container .deck-next-link { + background: #ccc; + font-family: serif; +} +.deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited { + color: #fff; +} +.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus { + background: #c00; + text-decoration: none; +} +.deck-container .deck-status { + font-size: 0.6666em; +} +.deck-container.deck-menu .slide { + background: #eee; +} +.deck-container.deck-menu .deck-current, .no-touch .deck-container.deck-menu .slide:hover { + background: #ddf; +} diff --git a/deck.js/themes/style/swiss.scss b/deck.js/themes/style/swiss.scss new file mode 100644 index 0000000..f9b0e76 --- /dev/null +++ b/deck.js/themes/style/swiss.scss @@ -0,0 +1,107 @@ +.deck-container { + font-family: "Helvetica Neue", sans-serif; + font-size:1.75em; + background:#fff; + + .slide { + background:#fff; + + h1 { + color:#000; + } + + h2 { + color:#c00; + border-bottom-color:#ccc; + } + + h3 { + color:#888; + } + + pre { + border-color:#ccc; + } + + code { + color:#888; + } + + blockquote { + font-size:2em; + font-style:italic; + padding:1em 2em; + color:#000; + border-left:5px solid #ccc; + + p { + margin:0; + } + + cite { + font-size:.5em; + font-style:normal; + font-weight:bold; + color:#888; + } + } + + ::-moz-selection{ background:#c00; color:#fff; } + ::selection { background:#c00; color:#fff; } + + a { + &, &:hover, &:focus, &:active, &:visited { + color:#c00; + text-decoration:none; + } + + &:hover, &:focus { + text-decoration:underline; + } + } + } + + > .slide { + .deck-before, .deck-previous { + opacity:0.4; + + &:not(.deck-child-current) { + .deck-before, .deck-previous { + opacity:1; + } + } + } + + .deck-child-current { + opacity:1; + } + } + + .deck-prev-link, .deck-next-link { + background:#ccc; + font-family:serif; // sans-serif arrows x-browser fail + + &, &:hover, &:focus, &:active, &:visited { + color:#fff; + } + + &:hover, &:focus { + background:#c00; + text-decoration:none; + } + } + + .deck-status { + font-size:0.6666em; + } + + &.deck-menu { + .slide { + background:#eee; + } + + .deck-current, .no-touch & .slide:hover { + background:#ddf; + } + } +} diff --git a/deck.js/themes/style/web-2.0.css b/deck.js/themes/style/web-2.0.css new file mode 100644 index 0000000..7b30894 --- /dev/null +++ b/deck.js/themes/style/web-2.0.css @@ -0,0 +1,192 @@ +@charset "UTF-8"; +.deck-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + font-size: 1.5em; + background-color: #000; +} +.deck-container > .slide .deck-before, .deck-container > .slide .deck-previous { + opacity: 0.4; +} +.deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous { + opacity: 1; +} +.deck-container > .slide .deck-child-current { + opacity: 1; +} +.deck-container .slide h1, .deck-container .slide h2, .deck-container .slide h3, .deck-container .slide h4, .deck-container .slide h5, .deck-container .slide h6 { +/* font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; */ +} +.deck-container .slide h1 { + color: #ff00ff; +} +.deck-container .slide h2 { + color: #ff00ff; + border-bottom: 0; +} +.deck-container .slide h3 { + color: #ff00ff; +} +.deck-container .slide pre { + border-color: #cde; + background: #fff; + position: relative; + z-index: auto; + /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */ +} +.borderradius .deck-container .slide pre { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.csstransforms.boxshadow .deck-container .slide pre > :first-child:before { + content: ""; + position: absolute; + z-index: -1; + background: #fff; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.csstransforms.boxshadow .deck-container .slide pre:before, .csstransforms.boxshadow .deck-container .slide pre:after { + content: ""; + position: absolute; + z-index: -2; + bottom: 15px; + width: 50%; + height: 20%; + max-width: 300px; + -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); +} +.csstransforms.boxshadow .deck-container .slide pre:before { + left: 10px; + -webkit-transform: rotate(-3deg); + -moz-transform: rotate(-3deg); + -ms-transform: rotate(-3deg); + -o-transform: rotate(-3deg); + transform: rotate(-3deg); +} +.csstransforms.boxshadow .deck-container .slide pre:after { + right: 10px; + -webkit-transform: rotate(3deg); + -moz-transform: rotate(3deg); + -ms-transform: rotate(3deg); + -o-transform: rotate(3deg); + transform: rotate(3deg); +} +.deck-container .slide code { + color: #789; +} +.deck-container .slide blockquote { + font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-size: 2em; + padding: 1em 2em .5em 2em; + color: #000; + background: #fff; + position: relative; + border: 1px solid #cde; + z-index: auto; +} +.borderradius .deck-container .slide blockquote { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.boxshadow .deck-container .slide blockquote > :first-child:before { + content: ""; + position: absolute; + z-index: -1; + background: #fff; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.boxshadow .deck-container .slide blockquote:after { + content: ""; + position: absolute; + z-index: -2; + top: 10px; + bottom: 10px; + left: 0; + right: 50%; + -moz-border-radius: 10px/100px; + border-radius: 10px/100px; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); +} +.deck-container .slide blockquote p { + margin: 0; +} +.deck-container .slide blockquote cite { + font-size: .5em; + font-style: normal; + font-weight: bold; + color: #888; +} +.deck-container .slide blockquote:before { + content: "“"; + position: absolute; + top: 0; + left: 0; + font-size: 5em; + line-height: 1; + color: #ccf0f0; + z-index: 1; +} +.deck-container .slide ::-moz-selection { + background: #08455f; + color: #fff; +} +.deck-container .slide ::selection { + background: #08455f; + color: #fff; +} +.deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited { + color: #599; + text-decoration: none; +} +.deck-container .slide a:hover, .deck-container .slide a:focus { + text-decoration: underline; +} +.deck-container .deck-prev-link, .deck-container .deck-next-link { + background: #fff; + opacity: 0.5; +} +.deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited { + color: #599; +} +.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus { + opacity: 1; + text-decoration: none; +} +.deck-container .deck-status { + font-size: 0.6666em; +} +.deck-container.deck-menu .slide { + background: transparent; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.rgba .deck-container.deck-menu .slide { + background: rgba(0, 0, 0, 0.1); +} +.deck-container.deck-menu .slide.deck-current, .rgba .deck-container.deck-menu .slide.deck-current, .no-touch .deck-container.deck-menu .slide:hover { + background: #fff; +} +.deck-container .goto-form { + background: #fff; + border: 1px solid #cde; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.boxshadow .deck-container .goto-form { + -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; +} diff --git a/deck.js/themes/style/web-2.0.scss b/deck.js/themes/style/web-2.0.scss new file mode 100644 index 0000000..2b36fae --- /dev/null +++ b/deck.js/themes/style/web-2.0.scss @@ -0,0 +1,250 @@ +@mixin border-radius($r) { + -webkit-border-radius:$r; + -moz-border-radius:$r; + border-radius:$r; +} + +@mixin rotate($deg) { + -webkit-transform:rotate($deg); + -moz-transform:rotate($deg); + -ms-transform:rotate($deg); + -o-transform:rotate($deg); + transform:rotate($deg); +} + +@mixin box-shadow($x, $y, $blur, $color) { + -webkit-box-shadow:$x $y $blur $color; + -moz-box-shadow:$x $y $blur $color; + box-shadow:$x $y $blur $color; +} + + +.deck-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + font-size:1.75em; + background: rgb(244,250,254); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(204,240,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,254,1)), color-stop(100%,rgba(204,240,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* W3C */ + background-attachment: fixed; + + > .slide { + text-shadow:1px 1px 1px rgba(255,255,255,.5); + + .deck-before, .deck-previous { + opacity:0.4; + + &:not(.deck-child-current) { + .deck-before, .deck-previous { + opacity:1; + } + } + } + + .deck-child-current { + opacity:1; + } + } + + .slide { + h1, h2, h3, h4, h5, h6 { + font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; + } + + h1 { + color:#08455f; + } + + h2 { + color:#0b7495; + border-bottom:0; + + .cssreflections & { + line-height:1; + -webkit-box-reflect:below -0.5555em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255,255,255,.1)), to(transparent)); + -moz-box-reflect:below -0.5555em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255,255,255,.3) 100%); + } + } + + h3 { + color:#000; + } + + pre { + border-color:#cde; + background:#fff; + position:relative; + z-index:auto; + + .borderradius & { + @include border-radius(5px); + } + + /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */ + .csstransforms.boxshadow & { + > :first-child:before { + content:""; + position:absolute; + z-index:-1; + background:#fff; + top:0; + bottom:0; + left:0; + right:0; + } + + &:before, &:after { + content:""; + position:absolute; + z-index:-2; + bottom:15px; + width:50%; + height:20%; + max-width:300px; + @include box-shadow(0, 15px, 10px, rgba(0, 0, 0, 0.7)); + } + + &:before { + left:10px; + @include rotate(-3deg); + } + + &:after { + right:10px; + @include rotate(3deg); + } + } + } + + code { + color:#789; + } + + blockquote { + font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-size:2em; + padding:1em 2em .5em 2em; + color:#000; + background:#fff; + position:relative; + border:1px solid #cde; + z-index:auto; + + .borderradius & { + @include border-radius(5px); + } + + .boxshadow & { + > :first-child:before { + content:""; + position:absolute; + z-index:-1; + background:#fff; + top:0; + bottom:0; + left:0; + right:0; + } + + &:after { + content:""; + position:absolute; + z-index:-2; + top: 10px; + bottom: 10px; + left: 0; + right: 50%; + -moz-border-radius: 10px / 100px; + border-radius: 10px / 100px; + @include box-shadow(0, 0, 15px, rgba(0,0,0,0.6)); + } + } + + p { + margin:0; + } + + cite { + font-size:.5em; + font-style:normal; + font-weight:bold; + color:#888; + } + + &:before { + content:"“"; + position:absolute; + top:0; + left:0; + font-size:5em; + line-height:1; + color:#ccf0f0; + z-index:1; + } + } + + ::-moz-selection{ background:#08455f; color:#fff; } + ::selection { background:#08455f; color:#fff; } + + a { + &, &:hover, &:focus, &:active, &:visited { + color:#599; + text-decoration:none; + } + + &:hover, &:focus { + text-decoration:underline; + } + } + } + + .deck-prev-link, .deck-next-link { + background:#fff; + opacity:0.5; + + &, &:hover, &:focus, &:active, &:visited { + color:#599; + } + + &:hover, &:focus { + opacity:1; + text-decoration:none; + } + } + + .deck-status { + font-size:0.6666em; + } + + &.deck-menu { + .slide { + background:transparent; + @include border-radius(5px); + + .rgba & { + background:rgba(0,0,0,.1); + } + + &.deck-current, .rgba &.deck-current, .no-touch &:hover { + background:#fff; + } + } + } + + .goto-form { + background:#fff; + border:1px solid #cde; + @include border-radius(5px); + + .boxshadow & { + -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + } + } +} + + diff --git a/deck.js/themes/transition/fade.css b/deck.js/themes/transition/fade.css new file mode 100644 index 0000000..3c3fa2d --- /dev/null +++ b/deck.js/themes/transition/fade.css @@ -0,0 +1,43 @@ +.csstransitions.csstransforms .deck-container .slide { + -webkit-transition: opacity 500ms ease-in-out 0ms; + -moz-transition: opacity 500ms ease-in-out 0ms; + -ms-transition: opacity 500ms ease-in-out 0ms; + -o-transition: opacity 500ms ease-in-out 0ms; + transition: opacity 500ms ease-in-out 0ms; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide { + position: absolute; + top: 0; + left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 0 48px; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide { + position: relative; + left: 0; + top: 0; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after { + opacity: 0; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current { + opacity: 1; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after { + opacity: 0; + pointer-events: none; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide { + visibility: visible; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current { + opacity: 1; + visibility: visible; + pointer-events: auto; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-after { + visibility: hidden; +} diff --git a/deck.js/themes/transition/fade.scss b/deck.js/themes/transition/fade.scss new file mode 100644 index 0000000..7612629 --- /dev/null +++ b/deck.js/themes/transition/fade.scss @@ -0,0 +1,69 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + -o-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + -o-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +.csstransitions.csstransforms { + .deck-container .slide { + @include transition(opacity, 500ms); + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + } + + .deck-next, .deck-after { + opacity:0; + } + + .deck-current { + opacity:1; + } + } + + > .deck-previous, > .deck-before, > .deck-next, > .deck-after { + opacity:0; + pointer-events:none; + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + opacity:1; + visibility:visible; + pointer-events:auto; + + .deck-next, .deck-after { + visibility:hidden; + } + } + } +} diff --git a/deck.js/themes/transition/horizontal-slide.css b/deck.js/themes/transition/horizontal-slide.css new file mode 100644 index 0000000..4a4c6ad --- /dev/null +++ b/deck.js/themes/transition/horizontal-slide.css @@ -0,0 +1,76 @@ +.csstransitions.csstransforms { + overflow-x: hidden; +} +.csstransitions.csstransforms .deck-container > .slide { + -webkit-transition: -webkit-transform 500ms ease-in-out; + -moz-transition: -moz-transform 500ms ease-in-out; + -ms-transition: -ms-transform 500ms ease-in-out; + -o-transition: -o-transform 500ms ease-in-out; + transition: transform 500ms ease-in-out; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide { + position: absolute; + top: 0; + left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 0 48px; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide { + position: relative; + left: 0; + top: 0; + -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after { + visibility: visible; + -webkit-transform: translate3d(200%, 0, 0); + -moz-transform: translate(200%, 0); + -ms-transform: translate(200%, 0); + -o-transform: translate(200%, 0); + transform: translate3d(200%, 0, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous { + -webkit-transform: translate3d(-200%, 0, 0); + -moz-transform: translate(-200%, 0); + -ms-transform: translate(-200%, 0); + -o-transform: translate(-200%, 0); + transform: translate3d(-200%, 0, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before { + -webkit-transform: translate3d(-400%, 0, 0); + -moz-transform: translate(-400%, 0); + -ms-transform: translate(-400%, 0); + -o-transform: translate(-400%, 0); + transform: translate3d(-400%, 0, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next { + -webkit-transform: translate3d(200%, 0, 0); + -moz-transform: translate(200%, 0); + -ms-transform: translate(200%, 0); + -o-transform: translate(200%, 0); + transform: translate3d(200%, 0, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after { + -webkit-transform: translate3d(400%, 0, 0); + -moz-transform: translate(400%, 0); + -ms-transform: translate(400%, 0); + -o-transform: translate(400%, 0); + transform: translate3d(400%, 0, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide { + visibility: visible; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current { + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; +} diff --git a/deck.js/themes/transition/horizontal-slide.scss b/deck.js/themes/transition/horizontal-slide.scss new file mode 100644 index 0000000..c260bbc --- /dev/null +++ b/deck.js/themes/transition/horizontal-slide.scss @@ -0,0 +1,90 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + -o-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + -o-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +@mixin transform($val) { + -webkit-transform:$val; + -moz-transform:$val; + -ms-transform:$val; + -o-transform:$val; + transform:$val; +} + +.csstransitions.csstransforms { + overflow-x:hidden; + + .deck-container > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out; + -ms-transition:-ms-transform 500ms ease-in-out; + -o-transition:-o-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(200%); + } + } + + > .deck-previous { + @include translate(-200%); + } + + > .deck-before { + @include translate(-400%); + } + + > .deck-next { + @include translate(200%); + } + + > .deck-after { + @include translate(400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include transform(none); + } + } +} \ No newline at end of file diff --git a/deck.js/themes/transition/vertical-slide.css b/deck.js/themes/transition/vertical-slide.css new file mode 100644 index 0000000..7f87092 --- /dev/null +++ b/deck.js/themes/transition/vertical-slide.css @@ -0,0 +1,94 @@ +.csstransitions.csstransforms .deck-container { + overflow-y: hidden; +} +.csstransitions.csstransforms .deck-container > .slide { + -webkit-transition: -webkit-transform 500ms ease-in-out; + -moz-transition: -moz-transform 500ms ease-in-out; + -ms-transition: -ms-transform 500ms ease-in-out; + -o-transition: -o-transform 500ms ease-in-out; + transition: transform 500ms ease-in-out; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide { + position: absolute; + top: 0; + left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 0 48px; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide { + position: relative; + left: 0; + top: 0; + -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after { + visibility: visible; + -webkit-transform: translate3d(0, 1600px, 0); + -moz-transform: translate(0, 1600px); + -ms-transform: translate(0, 1600px); + -o-transform: translate(0, 1600px); + transform: translate3d(0, 1600px, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous { + -webkit-transform: translate3d(0, -200%, 0); + -moz-transform: translate(0, -200%); + -ms-transform: translate(0, -200%); + -o-transform: translate(0, -200%); + transform: translate3d(0, -200%, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before { + -webkit-transform: translate3d(0, -400%, 0); + -moz-transform: translate(0, -400%); + -ms-transform: translate(0, -400%); + -o-transform: translate(0, -400%); + transform: translate3d(0, -400%, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next { + -webkit-transform: translate3d(0, 200%, 0); + -moz-transform: translate(0, 200%); + -ms-transform: translate(0, 200%); + -o-transform: translate(0, 200%); + transform: translate3d(0, 200%, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after { + -webkit-transform: translate3d(0, 400%, 0); + -moz-transform: translate(0, 400%); + -ms-transform: translate(0, 400%); + -o-transform: translate(0, 400%); + transform: translate3d(0, 400%, 0); +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide { + visibility: visible; +} +.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current { + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; +} +.csstransitions.csstransforms .deck-prev-link { + left: auto; + right: 8px; + top: 59px; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} +.csstransitions.csstransforms .deck-next-link { + top: 99px; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} diff --git a/deck.js/themes/transition/vertical-slide.scss b/deck.js/themes/transition/vertical-slide.scss new file mode 100644 index 0000000..c6892c3 --- /dev/null +++ b/deck.js/themes/transition/vertical-slide.scss @@ -0,0 +1,112 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + -o-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin rotate($deg) { + -webkit-transform:rotate($deg); + -moz-transform:rotate($deg); + -ms-transform:rotate($deg); + -o-transform:rotate($deg); + transform:rotate($deg); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + -o-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +@mixin transform($val) { + -webkit-transform:$val; + -moz-transform:$val; + -ms-transform:$val; + -o-transform:$val; + transform:$val; +} + +.csstransitions.csstransforms { + .deck-container { + overflow-y:hidden; + + > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out; + -ms-transition:-ms-transform 500ms ease-in-out; + -o-transition:-o-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(0, 1600px); + } + } + + > .deck-previous { + @include translate(0, -200%); + } + + > .deck-before { + @include translate(0, -400%); + } + + > .deck-next { + @include translate(0, 200%); + } + + > .deck-after { + @include translate(0, 400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include transform(none); + } + } + + .deck-prev-link { + left:auto; + right:8px; + top:59px; + @include rotate(90deg); + } + + .deck-next-link { + top:99px; + @include rotate(90deg); + } +} \ No newline at end of file -- cgit v1.2.1