summaryrefslogtreecommitdiff
path: root/slides/final/theme/scss/default.scss
diff options
context:
space:
mode:
Diffstat (limited to 'slides/final/theme/scss/default.scss')
-rw-r--r--slides/final/theme/scss/default.scss1047
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
58body {
59 background: black;
60}
61
62slides > 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
203slides.layout-faux-widescreen > slide {
204 padding: $slide-top-bottom-padding 160px;
205}
206
207slides.layout-widescreen,
208slides.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;
236 }
237
238 > slide.next {