diff options
author | Luke | 2012-03-29 15:45:09 +1100 |
---|---|---|
committer | Luke | 2012-03-29 15:45:09 +1100 |
commit | 06b4740ef7d0aecc01f325ca8c7d21679877c274 (patch) | |
tree | 4f8122253fcd1645dbc68f7503f78cbffaacedc6 /images/styles.css | |
download | io-slides-remote-06b4740ef7d0aecc01f325ca8c7d21679877c274.tar.gz |
adding inital code
Diffstat (limited to 'images/styles.css')
-rw-r--r-- | images/styles.css | 1249 |
1 files changed, 1249 insertions, 0 deletions
diff --git a/images/styles.css b/images/styles.css new file mode 100644 index 0000000..6f86a27 --- /dev/null +++ b/images/styles.css | |||
@@ -0,0 +1,1249 @@ | |||
1 | ::selection { | ||
2 | color: white; | ||
3 | background-color: red; /*1c88ff*/ | ||
4 | text-shadow: none; | ||
5 | } | ||
6 | |||
7 | :-webkit-full-screen { | ||
8 | |||
9 | } | ||
10 | |||
11 | html { | ||
12 | height: 100%; | ||
13 | overflow: hidden; | ||
14 | } | ||
15 | |||
16 | body { | ||
17 | margin: 0; | ||
18 | padding: 0; | ||
19 | |||
20 | display: block !important; | ||
21 | |||
22 | height: 100%; | ||
23 | min-height: 740px; | ||
24 | |||
25 | overflow-x: hidden; | ||
26 | overflow-y: auto; | ||
27 | |||
28 | /* | ||
29 | background: rgb(215, 215, 215); | ||
30 | background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
31 | background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
32 | background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
33 | background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); | ||
34 | */ | ||
35 | |||
36 | color: #fff; | ||
37 | /*background-image: -moz-radial-gradient(50% 30% 90deg, circle, #0075ba 0%, #304160 600px); | ||
38 | background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 600, from(#0075ba), to(#304160)); | ||
39 | background-color: #0075ba;*/ | ||
40 | background-image: -moz-radial-gradient(50% 30% 90deg, circle, #b1dfff 0%, #0c54ab 600px); | ||
41 | background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 600, from(#b1dfff), to(#0c54ab)); | ||
42 | background-attachment: fixed; | ||
43 | |||
44 | -webkit-font-smoothing: antialiased; | ||
45 | } | ||
46 | .slides { | ||
47 | width: 100%; | ||
48 | height: 100%; | ||
49 | position: absolute; | ||
50 | left: 0; | ||
51 | top: 0; | ||
52 | -webkit-transform: translate3d(0, 0, 0); | ||
53 | -webkit-perspective: 1000; | ||
54 | -webkit-transform-style: preserve-3d; | ||
55 | -moz-transform: translate(0); | ||
56 | -moz-perspective: 1000; | ||
57 | -moz-transform-style: preserve-3d; | ||
58 | } | ||
59 | |||
60 | .slides > article { | ||
61 | display: block; | ||
62 | |||
63 | position: absolute; | ||
64 | overflow: hidden; | ||
65 | |||
66 | width: 900px; | ||
67 | height: 700px; | ||
68 | |||
69 | left: 50%; | ||
70 | top: 50%; | ||
71 | |||
72 | margin-left: -450px; | ||
73 | margin-top: -350px; | ||
74 | |||
75 | padding: 40px 60px; | ||
76 | |||
77 | -o-box-sizing: border-box; | ||
78 | -moz-box-sizing: border-box; | ||
79 | -webkit-box-sizing: border-box; | ||
80 | box-sizing: border-box; | ||
81 | |||
82 | -o-border-radius: 10px; | ||
83 | -moz-border-radius: 10px; | ||
84 | -webkit-border-radius: 10px; | ||
85 | border-radius: 10px; | ||
86 | |||
87 | background-color: white; | ||
88 | |||
89 | box-shadow: 5px 5px 20px black; | ||
90 | /*border: 1px solid rgba(0, 0, 0, .3);*/ | ||
91 | |||
92 | -o-transition: all .3s ease-out; | ||
93 | -moz-transition: all .3s ease-out; | ||
94 | -webkit-transition: all .3s ease-out; | ||
95 | transition: all .3s ease-out; | ||
96 | } | ||
97 | .slides.layout-widescreen > article { | ||
98 | margin-left: -550px; | ||
99 | width: 1100px; | ||
100 | } | ||
101 | .slides.layout-faux-widescreen > article { | ||
102 | margin-left: -550px; | ||
103 | width: 1100px; | ||
104 | padding: 40px 160px; | ||
105 | } | ||
106 | |||
107 | .slides > article:not(.nobackground):not(.biglogo):not(.fill) { | ||
108 | background: white url(/images/gdd2011_banner.png) 105% 99% no-repeat; | ||
109 | } | ||
110 | .slides.nobackground article:not(.fill) { | ||
111 | /*background: white url(/images/colorbar.png) 105% 91% no-repeat !important; | ||
112 | background-size: contain;*/ | ||
113 | background: url(/images/devfests/devfest_logo_small.png) 98% 99% no-repeat, | ||
114 | url(/images/devfests/bubbles.png) 5% -125px no-repeat, | ||
115 | url(/images/colorbar.png) 0 91% repeat-x, | ||
116 | white !important; | ||
117 | } | ||
118 | .slides.nobackground article:not(.fill)::after, | ||
119 | .slides.nobackground article:not(.fill)::before { | ||
120 | color: inherit !important; | ||
121 | } | ||
122 | .slides > article:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::after { | ||
123 | content: attr(data-slide-num) ' / ' attr(data-total-slides); | ||
124 | position: absolute; | ||
125 | bottom: 2%; | ||
126 | left: 2%; | ||
127 | font-size: 12pt; | ||
128 | color: white; | ||
129 | } | ||
130 | .slides > article:not(:first-of-type):not(.biglogo):not(.fill):not(.nobackground)::before { | ||
131 | position: absolute; | ||
132 | bottom: 14px; | ||
133 | left: 275px; | ||
134 | font-size: 18pt; | ||
135 | color: white; | ||
136 | content: '@ebidel #gddjp'; | ||
137 | } | ||
138 | .slides.layout-widescreen > article:not(.nobackground):not(.biglogo), | ||
139 | .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { | ||
140 | background-position-x: 0, 840px; | ||
141 | } | ||
142 | |||
143 | /* Clickable/tappable areas */ | ||
144 | |||
145 | .slide-area { | ||
146 | z-index: 1000; | ||
147 | |||
148 | position: absolute; | ||
149 | left: 0; | ||
150 | top: 0; | ||
151 | width: 150px; | ||
152 | height: 700px; | ||
153 | |||
154 | left: 50%; | ||
155 | top: 50%; | ||
156 | |||
157 | cursor: pointer; | ||
158 | margin-top: -350px; | ||
159 | |||
160 | tap-highlight-color: transparent; | ||
161 | -o-tap-highlight-color: transparent; | ||
162 | -moz-tap-highlight-color: transparent; | ||
163 | -webkit-tap-highlight-color: transparent; | ||
164 | } | ||
165 | #prev-slide-area { | ||
166 | margin-left: -550px; | ||
167 | } | ||
168 | #next-slide-area { | ||
169 | margin-left: 400px; | ||
170 | } | ||
171 | .slides.layout-widescreen #prev-slide-area, | ||
172 | .slides.layout-faux-widescreen #prev-slide-area { | ||
173 | margin-left: -650px; | ||
174 | } | ||
175 | .slides.layout-widescreen #next-slide-area, | ||
176 | .slides.layout-faux-widescreen #next-slide-area { | ||
177 | margin-left: 500px; | ||
178 | } | ||
179 | |||
180 | /* Slide styles */ | ||
181 | |||
182 | article.biglogo { | ||
183 | background: url(/images/google_logo.png) 50% 50% no-repeat, | ||
184 | url(/images/gdd2011_banner.png) 105% 99% no-repeat, white; | ||
185 | } | ||
186 | |||
187 | /* Slides */ | ||
188 | |||
189 | .slides > article { | ||
190 | display: none; | ||
191 | /*-webkit-transform-origin: 0 100%;*/ | ||
192 | } | ||
193 | .slides > article.far-past { | ||
194 | display: block; | ||
195 | -o-transform: translate(-2040px); | ||
196 | -moz-transform: translate(-2040px); | ||
197 | -webkit-transform: translate3d(-2040px, 0, 0); | ||
198 | transform: translate(-2040px); | ||
199 | } | ||
200 | .slides > article.past { | ||
201 | display: block; | ||
202 | -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); | ||
203 | -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg); | ||
204 | -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg); | ||
205 | transform: translate(-1020px) rotateY(30deg) rotateX(45deg); | ||
206 | /*-webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg); | ||
207 | -webkit-transform-origin: 100% 50%;*/ | ||
208 | } | ||
209 | .slides > article.current { | ||
210 | display: block; | ||
211 | -o-transform: translate(0); | ||
212 | -moz-transform: translate(0); | ||
213 | -webkit-transform: translate3d(0, 0, 0); | ||
214 | transform: translate(0); | ||
215 | } | ||
216 | .slides > article.next { | ||
217 | display: block; | ||
218 | -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); | ||
219 | -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); | ||
220 | -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); | ||
221 | transform: translate(1020px) rotateY(-30deg) rotateX(45deg); | ||
222 | /*-webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg); | ||
223 | -webkit-transform-origin: 0 50%;*/ | ||
224 | } | ||
225 | .slides > article.far-next { | ||
226 | display: block; | ||
227 | transform: translate(2040px); | ||
228 | -o-transform: translate(2040px); | ||
229 | -moz-transform: translate(2040px); | ||
230 | -webkit-transform: translate3d(2040px, 0, 0); | ||
231 | } | ||
232 | |||
233 | .slides.layout-widescreen > article.far-past, | ||
234 | .slides.layout-faux-widescreen > article.far-past { | ||
235 | display: block; | ||
236 | transform: translate(-2260px); | ||
237 | -o-transform: translate(-2260px); | ||
238 | -moz-transform: translate(-2260px); | ||
239 | -webkit-transform: translate3d(-2260px, 0, 0); | ||
240 | } | ||
241 | .slides.layout-widescreen > article.past, | ||
242 | .slides.layout-faux-widescreen > article.past { | ||
243 | display: block; | ||
244 | transform: translate(-1130px); | ||
245 | -o-transform: translate(-1130px); | ||
246 | -moz-transform: translate(-1130px); | ||