From 782b971d157b041f223dfd3c2027428f06b1c8c9 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Wed, 18 Apr 2012 17:42:08 -0700 Subject: Sytling for notes not in preso mode. tag FTR --- theme/css/default.css | 212 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 135 insertions(+), 77 deletions(-) (limited to 'theme/css') 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 { background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -1005,11 +1055,24 @@ article.smaller q:before, article.smaller q:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; overflow: auto; padding: 1em; } +/* line 728, ../sass/default.scss */ +.with-notes .note { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); + pointer-events: auto; +} -/* line 708, ../sass/default.scss */ +/* line 735, ../sass/default.scss */ .source { font-size: 14px; color: #a9a9a9; @@ -1018,11 +1081,6 @@ article.smaller q:before, article.smaller q:after { left: 60px; } -/* line 716, ../sass/default.scss */ -input, button { - vertical-align: middle; -} - /*.centered { text-align: center; } @@ -1034,7 +1092,7 @@ input, button { -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); }*/ -/* line 732, ../sass/default.scss */ +/* line 755, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -1043,7 +1101,7 @@ input, button { display: box !important; } -/* line 736, ../sass/default.scss */ +/* line 759, ../sass/default.scss */ .flexbox.vcenter { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1061,7 +1119,7 @@ input, button { width: 100%; } -/* line 742, ../sass/default.scss */ +/* line 765, ../sass/default.scss */ .flexbox.vleft { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1079,7 +1137,7 @@ input, button { width: 100%; } -/* line 748, ../sass/default.scss */ +/* line 771, ../sass/default.scss */ .auto-fadein { -webkit-transition: opacity 0.6s ease-in 1s; -moz-transition: opacity 0.6s ease-in 1s; @@ -1090,7 +1148,7 @@ input, button { } /* Clickable/tappable areas */ -/* line 754, ../sass/default.scss */ +/* line 777, ../sass/default.scss */ .slide-area { z-index: 1000; position: absolute; @@ -1104,59 +1162,59 @@ input, button { margin-top: -350px; } -/* line 771, ../sass/default.scss */ +/* line 794, ../sass/default.scss */ #prev-slide-area { margin-left: -550px; } -/* line 776, ../sass/default.scss */ +/* line 799, ../sass/default.scss */ #next-slide-area { margin-left: 450px; } /* ===== SLIDE CONTENT ===== */ -/* line 784, ../sass/default.scss */ +/* line 807, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 790, ../sass/default.scss */ +/* line 813, ../sass/default.scss */ .segue { padding: 60px 120px; } -/* line 793, ../sass/default.scss */ +/* line 816, ../sass/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 797, ../sass/default.scss */ +/* line 820, ../sass/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 801, ../sass/default.scss */ +/* line 824, ../sass/default.scss */ .segue hgroup { position: absolute; bottom: 225px; } -/* line 807, ../sass/default.scss */ +/* line 830, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 811, ../sass/default.scss */ +/* line 834, ../sass/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 816, ../sass/default.scss */ +/* line 839, ../sass/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 821, ../sass/default.scss */ +/* line 844, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1164,7 +1222,7 @@ input, button { line-height: 1.3; } -/* line 829, ../sass/default.scss */ +/* line 852, ../sass/default.scss */ aside.gdbar { height: 97px; width: 215px; @@ -1193,7 +1251,7 @@ aside.gdbar { transition: all 0.5s ease-out 0.5s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 840, ../sass/default.scss */ +/* line 863, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1206,7 +1264,7 @@ aside.gdbar.right { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 847, ../sass/default.scss */ +/* line 870, ../sass/default.scss */ aside.gdbar.right img { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); @@ -1214,13 +1272,13 @@ aside.gdbar.right img { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 852, ../sass/default.scss */ +/* line 875, ../sass/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 858, ../sass/default.scss */ +/* line 881, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1229,24 +1287,24 @@ aside.gdbar img { margin: 8px 15px; } -/* line 869, ../sass/default.scss */ +/* line 892, ../sass/default.scss */ .title-slide hgroup { bottom: 100px; } -/* line 872, ../sass/default.scss */ +/* line 895, ../sass/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 879, ../sass/default.scss */ +/* line 902, ../sass/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 885, ../sass/default.scss */ +/* line 908, ../sass/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1254,11 +1312,11 @@ aside.gdbar img { margin-top: 2em; } -/* line 894, ../sass/default.scss */ +/* line 917, ../sass/default.scss */ .quote { color: #e6e6e6; } -/* line 897, ../sass/default.scss */ +/* line 920, ../sass/default.scss */ .quote .author { font-size: 24px; position: absolute; @@ -1266,12 +1324,12 @@ aside.gdbar img { line-height: 1.4; } -/* line 906, ../sass/default.scss */ +/* line 929, ../sass/default.scss */ [data-config-contact] a { color: white; border-bottom: none; } -/* line 910, ../sass/default.scss */ +/* line 933, ../sass/default.scss */ [data-config-contact] span { width: 115px; display: inline-block; -- cgit v1.2.3