Skip to content

Commit 0340047

Browse files
hakimelhakimel
committed
Merge pull request hakimel#1119 from hakimel/feature/new-overview
Refactored overview mode
2 parents 3b45b61 + 8e66876 commit 0340047

3 files changed

Lines changed: 257 additions & 187 deletions

File tree

‎css/reveal.css‎

Lines changed: 52 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -624,63 +624,6 @@ body {
624624
-webkit-transition: none;
625625
transition: none; }
626626

627-
/*********************************************
628-
* OVERVIEW
629-
*********************************************/
630-
.reveal.overview {
631-
-webkit-perspective-origin: 50% 50%;
632-
perspective-origin: 50% 50%;
633-
-webkit-perspective: 700px;
634-
perspective: 700px; }
635-
636-
.reveal.overview .slides section {
637-
height: 700px;
638-
overflow: hidden;
639-
opacity: 1 !important;
640-
visibility: visible !important;
641-
cursor: pointer;
642-
background: rgba(0, 0, 0, 0.1);
643-
-moz-box-sizing: border-box;
644-
box-sizing: border-box; }
645-
646-
.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
647-
-webkit-transition: none !important;
648-
transition: none !important; }
649-
650-
.reveal.overview .slides section .fragment {
651-
opacity: 1; }
652-
653-
.reveal.overview .slides section:after, .reveal.overview .slides section:before {
654-
display: none !important; }
655-
656-
.reveal.overview .slides section > section {
657-
opacity: 1;
658-
cursor: pointer; }
659-
660-
.reveal.overview .slides section:hover {
661-
background: rgba(0, 0, 0, 0.3); }
662-
663-
.reveal.overview .slides section.present {
664-
background: rgba(0, 0, 0, 0.3); }
665-
666-
.reveal.overview .slides > section.stack {
667-
padding: 0;
668-
top: 0 !important;
669-
background: none;
670-
overflow: visible; }
671-
672-
.reveal.overview .backgrounds {
673-
-webkit-perspective: inherit;
674-
perspective: inherit; }
675-
676-
.reveal.overview .backgrounds .slide-background {
677-
opacity: 1;
678-
visibility: visible; }
679-
680-
.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
681-
-webkit-transition: none !important;
682-
transition: none !important; }
683-
684627
/*********************************************
685628
* PAUSED MODE
686629
*********************************************/
@@ -901,6 +844,58 @@ body {
901844
-webkit-transition-duration: 1200ms;
902845
transition-duration: 1200ms; }
903846

847+
/*********************************************
848+
* OVERVIEW
849+
*********************************************/
850+
.reveal.overview {
851+
-webkit-perspective-origin: 50% 50%;
852+
perspective-origin: 50% 50%;
853+
-webkit-perspective: 700px;
854+
perspective: 700px; }
855+
.reveal.overview .slides section {
856+
height: 700px;
857+
opacity: 1 !important;
858+
overflow: hidden;
859+
visibility: visible !important;
860+
cursor: pointer;
861+
-moz-box-sizing: border-box;
862+
box-sizing: border-box; }
863+
.reveal.overview .slides section:hover, .reveal.overview .slides section.present {
864+
outline: 10px solid rgba(150, 150, 150, 0.4);
865+
outline-offset: 10px; }
866+
.reveal.overview .slides section .fragment {
867+
opacity: 1;
868+
-webkit-transition: none;
869+
transition: none; }
870+
.reveal.overview .slides section:after, .reveal.overview .slides section:before {
871+
display: none !important; }
872+
.reveal.overview .slides > section.stack {
873+
padding: 0;
874+
top: 0 !important;
875+
background: none;
876+
outline: none;
877+
overflow: visible; }
878+
.reveal.overview .backgrounds {
879+
-webkit-perspective: inherit;
880+
perspective: inherit; }
881+
.reveal.overview .backgrounds .slide-background {
882+
opacity: 1;
883+
visibility: visible;
884+
outline: 10px solid rgba(150, 150, 150, 0.1);
885+
outline-offset: 10px; }
886+
887+
.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
888+
-webkit-transition: none;
889+
transition: none; }
890+
891+
.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
892+
-webkit-transition: none;
893+
transition: none; }
894+
895+
.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background {
896+
-webkit-transition: -webkit-transform 0.4s ease;
897+
transition: transform 0.4s ease; }
898+
904899
/*********************************************
905900
* RTL SUPPORT
906901
*********************************************/

‎css/reveal.scss‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -739,64 +739,6 @@ body {
739739
}
740740

741741

742-
/*********************************************
743-
* OVERVIEW
744-
*********************************************/
745-
746-
.reveal.overview {
747-
perspective-origin: 50% 50%;
748-
perspective: 700px;
749-
}
750-
.reveal.overview .slides section {
751-
height: 700px;
752-
overflow: hidden;
753-
opacity: 1 !important;
754-
visibility: visible !important;
755-
cursor: pointer;
756-
background: rgba(0,0,0,0.1);
757-
box-sizing: border-box;
758-
}
759-
.reveal.overview .slides section,
760-
.reveal.overview-deactivating .slides section {
761-
transition: none !important;
762-
}
763-
.reveal.overview .slides section .fragment {
764-
opacity: 1;
765-
}
766-
.reveal.overview .slides section:after,
767-
.reveal.overview .slides section:before {
768-
display: none !important;
769-
}
770-
.reveal.overview .slides section>section {
771-
opacity: 1;
772-
cursor: pointer;
773-
}
774-
.reveal.overview .slides section:hover {
775-
background: rgba(0,0,0,0.3);
776-
}
777-
.reveal.overview .slides section.present {
778-
background: rgba(0,0,0,0.3);
779-
}
780-
.reveal.overview .slides>section.stack {
781-
padding: 0;
782-
top: 0 !important;
783-
background: none;
784-
overflow: visible;
785-
}
786-
787-
.reveal.overview .backgrounds {
788-
perspective: inherit;
789-
}
790-
.reveal.overview .backgrounds .slide-background {
791-
opacity: 1;
792-
visibility: visible;
793-
}
794-
.reveal.overview .backgrounds .slide-background,
795-
.reveal.overview-deactivating .backgrounds .slide-background {
796-
transition: none !important;
797-
}
798-
799-
800742
/*********************************************
801743
* PAUSED MODE
802744
*********************************************/
@@ -1037,6 +979,76 @@ body {
1037979
}
1038980

1039981

982+
/*********************************************
983+
* OVERVIEW
984+
*********************************************/
985+
986+
.reveal.overview {
987+
perspective-origin: 50% 50%;
988+
perspective: 700px;
989+
990+
.slides section {
991+
height: 700px;
992+
opacity: 1 !important;
993+
overflow: hidden;
994+
visibility: visible !important;
995+
cursor: pointer;
996+
box-sizing: border-box;
997+
}
998+
.slides section:hover,
999+
.slides section.present {
1000+
outline: 10px solid rgba(150,150,150,0.4);
1001+
outline-offset: 10px;
1002+
}
1003+
.slides section .fragment {
1004+
opacity: 1;
1005+
transition: none;
1006+
}
1007+
.slides section:after,
1008+
.slides section:before {
1009+
display: none !important;
1010+
}
1011+
.slides>section.stack {
1012+
padding: 0;
1013+
top: 0 !important;
1014+
background: none;
1015+
outline: none;
1016+
overflow: visible;
1017+
}
1018+
1019+
.backgrounds {
1020+
perspective: inherit;
1021+
}
1022+
1023+
.backgrounds .slide-background {
1024+
opacity: 1;
1025+
visibility: visible;
1026+
1027+
// This can't be applied to the slide itself in Safari
1028+
outline: 10px solid rgba(150,150,150,0.1);
1029+
outline-offset: 10px;
1030+
}
1031+
}
1032+
1033+
// Disable transitions transitions while we're activating
1034+
// or deactivating the overview mode.
1035+
.reveal.overview .slides section,
1036+
.reveal.overview-deactivating .slides section {
1037+
transition: none;
1038+
}
1039+
1040+
.reveal.overview .backgrounds .slide-background,
1041+
.reveal.overview-deactivating .backgrounds .slide-background {
1042+
transition: none;
1043+
}
1044+
1045+
.reveal.overview-animated .slides,
1046+
.reveal.overview-animated .slides section,
1047+
.reveal.overview-animated .backgrounds .slide-background {
1048+
transition: transform 0.4s ease;
1049+
}
1050+
1051+
10401052
/*********************************************
10411053
* RTL SUPPORT
10421054
*********************************************/

0 commit comments

Comments
 (0)