aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
authorEric Bidelman2012-04-18 17:42:08 -0700
committerEric Bidelman2012-04-18 17:43:20 -0700
commit782b971d157b041f223dfd3c2027428f06b1c8c9 (patch)
tree8524f5e77608fdb3aba88580e48cf7091233da8c /theme/sass
parenta8e534158525f69db7276cded5f79e6fb6819754 (diff)
downloadio-slides-remote-782b971d157b041f223dfd3c2027428f06b1c8c9.tar.gz
Sytling for notes not in preso mode. <base> tag FTR
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/_base.scss4
-rw-r--r--theme/sass/default.scss141
2 files changed, 86 insertions, 59 deletions
diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss
index 265b77e..a3b00a8 100644
--- a/theme/sass/_base.scss
+++ b/theme/sass/_base.scss
@@ -65,6 +65,10 @@ body {
65 } 65 }
66} 66}
67 67
68input, button {
69 vertical-align: middle;
70}
71
68slides > slide[hidden] { 72slides > slide[hidden] {
69 display: none !important; 73 display: none !important;
70} 74}
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index c0d9eb8..9d65994 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -629,82 +629,109 @@ article.smaller {
629 color: $gray-4; 629 color: $gray-4;
630} 630}
631 631
632.note {
633 position: absolute;
634 z-index: 100;
635 width: 100%;
636 height: 100%;
637 top: 0;
638 left: 0;
639 padding: 1em;
640 background: rgba(0, 0, 0, 0.3);
641 opacity: 0;
642 pointer-events: none;
643 @include flexbox;
644 @include flex-center-center;
645 @include border-radius($slide-border-radius);
646
647 @include box-sizing(border-box);
648 @include transform(translateY($slide-height / 2));@include transition(all 0.4s ease-in-out);
649
650 > section {
651 background: #fff;
652 @include border-radius($slide-border-radius);
653 @include box-shadow(0 0 10px $gray-3);
654 width: 60%;
655 padding: 2em;
656 }
657}
658
632// Speaker notes only show the current slide. 659// Speaker notes only show the current slide.
633.with-notes { 660.with-notes {
634 661
635 slides.layout-widescreen, 662 &.popup {
636 slides.layout-faux-widescreen { 663
664 slides.layout-widescreen,
665 slides.layout-faux-widescreen {
666 slide {
667 &.next {
668 @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35));
669 }
670 .note {
671 @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5));
672 }
673 }
674 }
675
637 slide { 676 slide {
638 &.next { 677 overflow: visible;
639 @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35)); 678 background: white;
679 @include transition(none); // No slide transition goodies when in presenter mode.
680 pointer-events: none;
681 @include transform-origin(0, 0); // For speaker note transition.
682
683 &:not(.backdrop) {
684 @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0));
685 @include box-shadow(0 0 10px $gray-3);
640 } 686 }
641 .note { 687
642 @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5)); 688 &.backdrop {
689 //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1));
690 @include background-image(radial-gradient(50% 50%, #b1dfff 0%,
691 $brand-blue 600px));
643 } 692 }
644 }
645 }
646 693
647 slide { 694 &.next {
648 overflow: visible; 695 @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35));
649 background: white; 696 opacity: 1 !important;
650 @include transition(none); // No slide transition goodies when in presenter mode.
651 pointer-events: none;
652 @include transform-origin(0, 0); // For speaker note transition.
653 697
654 &:not(.backdrop) { 698 .note {
655 @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0)); 699 display: none !important; // Prevents seeing notes if we go to previous slide.
656 @include box-shadow(0 0 10px $gray-3); 700 }
701 }
657 } 702 }
658 703
659 &.backdrop { 704 .note {
660 //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1)); 705 width: 109%;
661 @include background-image(radial-gradient(50% 50%, #b1dfff 0%, 706 height: $slide-height / 2 - 90;
662 $brand-blue 600px)); 707 background: $gray-1;
663 } 708 padding: 0;
664 709
665 &.next { 710 @include box-shadow(0 0 10px $gray-3);
666 @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35));
667 opacity: 1 !important;
668 711
669 .note { 712 @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5));
670 display: none; // Prevents seeing notes if we go to previous slide. 713 @include transition(opacity 400ms ease-in-out);
714
715 > section {
716 background: #fff;
717 @include border-radius($slide-border-radius);
718 height: 100%;
719 width: 100%;
720 @include box-sizing(border-box);
721 @include box-shadow(none);
722 overflow: auto;
723 padding: 1em;
671 } 724 }
672 } 725 }
673 } 726 }
727
674 .note { 728 .note {
675 opacity: 1; 729 opacity: 1;
730 @include transform(translateY(0));
676 pointer-events: auto; // Allow people to do things like open links embedded in the speaker notes. 731 pointer-events: auto; // Allow people to do things like open links embedded in the speaker notes.
677 } 732 }
678} 733}
679 734
680.note {
681 position: absolute;
682 z-index: 100;
683 width: 109%;
684 height: $slide-height / 2 - 90;
685 top: 0;
686 left: 0;
687 background: $gray-1;
688 pointer-events: none;
689 @include border-radius($slide-border-radius);
690
691 @include box-sizing(border-box);
692 @include box-shadow(0 0 10px $gray-3);
693
694 @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5));
695 @include transition(opacity 400ms ease-in-out);
696
697 > section {
698 background: #fff;
699 @include border-radius($slide-border-radius);
700 height: 100%;
701 width: 100%;
702 @include box-sizing(border-box);
703 overflow: auto;
704 padding: 1em;
705 }
706}
707
708.source { 735.source {
709 font-size: 14px; 736 font-size: 14px;
710 color: $gray-2; 737 color: $gray-2;
@@ -713,10 +740,6 @@ article.smaller {
713 left: $slide-left-right-padding; 740 left: $slide-left-right-padding;
714} 741}
715 742
716input, button {
717 vertical-align: middle;
718}
719
720/*.centered { 743/*.centered {
721 text-align: center; 744 text-align: center;
722} 745}