Sytling for notes not in preso mode. <base> tag FTR

3 files changed, 221 insertions, 136 deletions

diff --git a/theme/css/default.css b/theme/css/default.css
index 92b9dbe..014e1e7 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -98,11 +98,16 @@ body.loaded {
 }
 
 /* line 68, ../sass/_base.scss */
+input, button {
+  vertical-align: middle;
+}
+
+/* line 72, ../sass/_base.scss */
 slides > slide[hidden] {
   display: none !important;
 }
 
-/* line 72, ../sass/_base.scss */
+/* line 76, ../sass/_base.scss */
 slides {
   width: 100%;
   height: 100%;
@@ -120,7 +125,7 @@ slides {
   transform-style: preserve-3d;
 }
 
-/* line 83, ../sass/_base.scss */
+/* line 87, ../sass/_base.scss */
 slides > slide {
   display: block;
   position: absolute;
@@ -887,26 +892,89 @@ article.smaller q:before, article.smaller q:after {
   color: #515151;
 }
 
-/* line 638, ../sass/default.scss */
-.with-notes slides.layout-widescreen slide.next,
-.with-notes slides.layout-faux-widescreen slide.next {
+/* line 632, ../sass/default.scss */
+.note {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 1em;
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  pointer-events: none;
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-box !important;
+  display: -o-box !important;
+  display: box !important;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-box-align: center;
+  box-align: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-box-pack: center;
+  box-pack: center;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: translateY(350px);
+  -moz-transform: translateY(350px);
+  -ms-transform: translateY(350px);
+  -o-transform: translateY(350px);
+  transform: translateY(350px);
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+/* line 650, ../sass/default.scss */
+.note > section {
+  background: #fff;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 0 10px #797979;
+  -moz-box-shadow: 0 0 10px #797979;
+  box-shadow: 0 0 10px #797979;
+  width: 60%;
+  padding: 2em;
+}
+
+/* line 667, ../sass/default.scss */
+.with-notes.popup slides.layout-widescreen slide.next,
+.with-notes.popup slides.layout-faux-widescreen slide.next {
   -webkit-transform: translate3d(690px, 80px, 0) scale(0.35);
   -moz-transform: translate3d(690px, 80px, 0) scale(0.35);
   -ms-transform: translate3d(690px, 80px, 0) scale(0.35);
   -o-transform: translate3d(690px, 80px, 0) scale(0.35);
   transform: translate3d(690px, 80px, 0) scale(0.35);
 }
-/* line 641, ../sass/default.scss */
-.with-notes slides.layout-widescreen slide .note,
-.with-notes slides.layout-faux-widescreen slide .note {
+/* line 670, ../sass/default.scss */
+.with-notes.popup slides.layout-widescreen slide .note,
+.with-notes.popup slides.layout-faux-widescreen slide .note {
   -webkit-transform: translate3d(300px, 800px, 0) scale(1.5);
   -moz-transform: translate3d(300px, 800px, 0) scale(1.5);
   -ms-transform: translate3d(300px, 800px, 0) scale(1.5);
   -o-transform: translate3d(300px, 800px, 0) scale(1.5);
   transform: translate3d(300px, 800px, 0) scale(1.5);
 }
-/* line 647, ../sass/default.scss */
-.with-notes slide {
+/* line 676, ../sass/default.scss */
+.with-notes.popup slide {
   overflow: visible;
   background: white;
   -webkit-transition: none;
@@ -921,8 +989,8 @@ article.smaller q:before, article.smaller q:after {
   -o-transform-origin: 0 0;
   transform-origin: 0 0;
 }
-/* line 654, ../sass/default.scss */
-.with-notes slide:not(.backdrop) {
+/* line 683, ../sass/default.scss */
+.with-notes.popup slide:not(.backdrop) {
   -webkit-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
   -moz-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
   -ms-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
@@ -932,8 +1000,8 @@ article.smaller q:before, article.smaller q:after {
   -moz-box-shadow: 0 0 10px #797979;
   box-shadow: 0 0 10px #797979;
 }
-/* line 659, ../sass/default.scss */
-.with-notes slide.backdrop {
+/* line 688, ../sass/default.scss */
+.with-notes.popup slide.backdrop {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #4387fd));
   background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
   background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
@@ -941,8 +1009,8 @@ article.smaller q:before, article.smaller q:after {
   background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
   background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
 }
-/* line 665, ../sass/default.scss */
-.with-notes slide.next {
+/* line 694, ../sass/default.scss */
+.with-notes.popup slide.next {
   -webkit-transform: translate3d(570px, 80px, 0) scale(0.35);
   -moz-transform: translate3d(570px, 80px, 0) scale(0.35);
   -ms-transform: translate3d(570px, 80px, 0) scale(0.35);
@@ -950,34 +1018,16 @@ article.smaller q:before, article.smaller q:after {
   transform: translate3d(570px, 80px, 0) scale(0.35);
   opacity: 1 !important;
 }
-/* line 669, ../sass/default.scss */
-.with-notes slide.next .note {
-  display: none;
-}
-/* line 674, ../sass/default.scss */
-.with-notes .note {
-  opacity: 1;
-  pointer-events: auto;
+/* line 698, ../sass/default.scss */
+.with-notes.popup slide.next .note {
+  display: none !important;
 }
-
-/* line 680, ../sass/default.scss */
-.note {
-  position: absolute;
-  z-index: 100;
+/* line 704, ../sass/default.scss */
+.with-notes.popup .note {
   width: 109%;
   height: 260px;
-  top: 0;
-  left: 0;
   background: #e6e6e6;
-  pointer-events: none;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+  padding: 0;
   -webkit-box-shadow: 0 0 10px #797979;
   -moz-box-shadow: 0 0 10px #797979;
   box-shadow: 0 0 10px #797979;
@@ -992,8 +1042,8 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: opacity 400ms ease-in-out;
   transition: opacity 400ms ease-in-out;
 }
-/* line 697, ../sass/default.scss */
-.note > section {
+/* line 715, ../sass/default.scss */
+.with-notes.popup .note > section {