diff options
Diffstat (limited to 'slides/final/theme/scss/default.scss')
-rw-r--r-- | slides/final/theme/scss/default.scss | 1047 |
1 files changed, 1047 insertions, 0 deletions
diff --git a/slides/final/theme/scss/default.scss b/slides/final/theme/scss/default.scss new file mode 100644 index 0000000..b8d11b0 --- /dev/null +++ b/slides/final/theme/scss/default.scss | |||
@@ -0,0 +1,1047 @@ | |||
1 | @import "base"; | ||
2 | @import "compass/css3/columns"; | ||
3 | @import "compass/css3/user-interface"; | ||
4 | |||
5 | @mixin highlight-color($color: $brand-yellow) { | ||
6 | -webkit-tap-highlight-color: $color; | ||
7 | -moz-tap-highlight-color: $color; | ||
8 | -ms-tap-highlight-color: $color; | ||
9 | -o-tap-highlight-color: $color; | ||
10 | tap-highlight-color: $color; | ||
11 | } | ||
12 | |||
13 | @mixin backdrop { | ||
14 | @include background(linear-gradient(white, white 85%, $gray-1)); | ||
15 | background-color: white; | ||
16 | } | ||
17 | |||
18 | |||
19 | /** | ||
20 | * Theme Styles | ||
21 | */ | ||
22 | ::selection { | ||
23 | color: white; | ||
24 | background-color: $brand-yellow; | ||
25 | @include text-shadow(none); | ||
26 | } | ||
27 | |||
28 | ::-webkit-scrollbar { | ||
29 | height: 16px; | ||
30 | overflow: visible; | ||
31 | width: 16px; | ||
32 | } | ||
33 | ::-webkit-scrollbar-thumb { | ||
34 | background-color: rgba(0, 0, 0, .1); | ||
35 | background-clip: padding-box; | ||
36 | border: solid transparent; | ||
37 | min-height: 28px; | ||
38 | padding: 100px 0 0; | ||
39 | @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)); | ||
40 | border-width: 1px 1px 1px 6px; | ||
41 | } | ||
42 | ::-webkit-scrollbar-thumb:hover { | ||
43 | background-color: rgba(0, 0, 0, 0.5); | ||
44 | } | ||
45 | ::-webkit-scrollbar-button { | ||
46 | height: 0; | ||
47 | width: 0; | ||
48 | } | ||
49 | ::-webkit-scrollbar-track { | ||
50 | background-clip: padding-box; | ||
51 | border: solid transparent; | ||
52 | border-width: 0 0 0 4px; | ||
53 | } | ||
54 | ::-webkit-scrollbar-corner { | ||
55 | background: transparent; | ||
56 | } | ||
57 | |||
58 | body { | ||
59 | background: black; | ||
60 | } | ||
61 | |||
62 | slides > slide { | ||
63 | display: none; | ||
64 | font-family: 'Open Sans', Arial, sans-serif; | ||
65 | font-size: 26px; | ||
66 | color: $gray-3; | ||
67 | //@include background(linear-gradient(white, white 85%, $gray-1)); | ||
68 | //background-color: white; | ||
69 | width: $slide-width; | ||
70 | height: $slide-height; | ||
71 | margin-left: -$slide-width / 2; | ||
72 | margin-top: -$slide-height / 2; | ||
73 | padding: $slide-top-bottom-padding $slide-left-right-padding; | ||
74 | |||
75 | @include border-radius($slide-border-radius); | ||
76 | //@include box-shadow(5px 5px 20px $gray-4); | ||
77 | @include transition(all 0.6s ease-in-out); | ||
78 | |||
79 | //$translateX: 1020px; | ||
80 | //$rotateY: 30deg; | ||
81 | //$rotateX: 45deg; | ||
82 | |||
83 | &.far-past { | ||
84 | //display: block; | ||
85 | display: none; | ||
86 | //@include transform(translate(-$translateX * 2)); | ||
87 | //@include transform(translate3d(-$translateX * 2, 0, 0)); | ||
88 | } | ||
89 | |||
90 | &.past { | ||
91 | display: block; | ||
92 | //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX)); | ||
93 | //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX)); | ||
94 | opacity: 0; | ||
95 | } | ||
96 | |||
97 | &.current { | ||
98 | display: block; | ||
99 | //@include transform(translate(0)); | ||
100 | //@include transform(translate3d(0, 0, 0)); | ||
101 | opacity: 1; | ||
102 | |||
103 | .auto-fadein { | ||
104 | opacity: 1; | ||
105 | } | ||
106 | |||
107 | .gdbar { | ||
108 | @include background-size(100% 100%); | ||
109 | } | ||
110 | } | ||
111 | |||
112 | &.next { | ||
113 | display: block; | ||
114 | //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX)); | ||
115 | //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX)); | ||
116 | opacity: 0; | ||
117 | pointer-events: none; | ||
118 | } | ||
119 | |||
120 | &.far-next { | ||
121 | //display: block; | ||
122 | display: none; | ||
123 | //@include transform(translate($translateX * 2)); | ||
124 | //@include transform(translate3d($translateX * 2, 0, 0)); | ||
125 | } | ||
126 | |||
127 | &.dark { | ||
128 | background: $gray-4 !important; | ||
129 | } | ||
130 | |||
131 | &:not(.nobackground) { | ||
132 | //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat; | ||
133 | //@include background-size($brand-small-icon-size $brand-small-icon-size); | ||
134 | |||
135 | &:before { | ||
136 | font-size: 12pt; | ||
137 | content: $social-tags; | ||
138 | position: absolute; | ||
139 | bottom: $slide-top-bottom-padding / 2; | ||
140 | left: $slide-left-right-padding; | ||
141 | background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%; | ||
142 | @include background-size($brand-small-icon-size $brand-small-icon-size); | ||
143 | padding-left: $brand-small-icon-size + 10; | ||
144 | height: $brand-small-icon-size; | ||
145 | line-height: 1.9; | ||
146 | } | ||
147 | &:after { | ||
148 | font-size: 12pt; | ||
149 | content: attr(data-slide-num) '/' attr(data-total-slides); | ||
150 | position: absolute; | ||
151 | bottom: $slide-top-bottom-padding / 2; | ||
152 | right: $slide-left-right-padding; | ||
153 | line-height: 1.9; | ||
154 | } | ||
155 | } | ||
156 | |||
157 | &.title-slide { | ||
158 | &:after { | ||
159 | content: ''; | ||
160 | //background: url(../../images/io2012_logo.png) no-repeat 100% 50%; | ||
161 | //@include background-size(contain); | ||
162 | position: absolute; | ||
163 | bottom: $slide-top-bottom-padding; | ||
164 | right: $slide-top-bottom-padding; | ||
165 | width: 100%; | ||
166 | height: 60px; | ||
167 | } | ||
168 | } | ||
169 | |||
170 | &.backdrop { | ||
171 | z-index: -10; | ||
172 | display: block !important; | ||
173 | @include backdrop; | ||
174 | |||
175 | &:after, &:before { | ||
176 | display: none; // Prevent double set of slide nums and footer icons. | ||
177 | } | ||
178 | } | ||
179 | |||
180 | > hgroup + article { | ||
181 | margin-top: $article-content-top-padding; | ||
182 | |||
183 | &.flexbox { | ||
184 | &.vcenter, &.vleft, &.vright { | ||
185 | height: 80%; | ||
186 | } | ||
187 | } | ||
188 | |||
189 | p { | ||
190 | margin-bottom: 1em; | ||
191 | } | ||
192 | } | ||
193 | |||
194 | > article:only-child { | ||
195 | height: 100%; | ||
196 | |||
197 | > iframe { | ||
198 | height: 98%; | ||
199 | } | ||
200 | } | ||
201 | } | ||
202 | |||
203 | slides.layout-faux-widescreen > slide { | ||
204 | padding: $slide-top-bottom-padding 160px; | ||
205 | } | ||
206 | |||
207 | slides.layout-widescreen, | ||
208 | slides.layout-faux-widescreen { | ||
209 | |||
210 | $translateX: 1130px; | ||
211 | |||
212 | > slide { | ||
213 | margin-left: -$slide-width-widescreen / 2; | ||
214 | width: $slide-width-widescreen; | ||
215 | } | ||
216 | |||
217 | > slide.far-past { | ||
218 | display: block; | ||
219 | display: none; | ||
220 | @include transform(translate(-$translateX * 2)); | ||
221 | @include transform(translate3d(-$translateX * 2, 0, 0)); | ||
222 | } | ||
223 | |||
224 | > slide.past { | ||
225 | display: block; | ||
226 | //@include transform(translate(-$translateX)); | ||
227 | //@include transform(translate3d(-$translateX, 0, 0)); | ||
228 | opacity: 0; | ||
229 | } | ||
230 | |||
231 | > slide.current { | ||
232 | display: block; | ||
233 | //@include transform(translate(0)); | ||
234 | //@include transform(translate3d(0, 0, 0)); | ||
235 | opacity: 1; | ||