Eliminate duplicated platform-specific code in ScrollingTreeStickyNode
[WebKit-https.git] / Websites / webkit.org / demos / calendar / Calendar.css
1 body {
2     font-family: "Helvetica";
3     font-size: 11px;
4     cursor: default;
5 }
6
7 *[contentEditable="true"] {
8     cursor: text;
9 }
10
11 #sidePanel {
12     position: absolute;
13     left: 0;
14     top: 0;
15     bottom: 0;
16     width: 170px;
17     background: #d4dde6;
18     border-right: 1px solid #a5a5a5;
19     margin-left: 0;
20     margin-right: 0;
21     overflow: hidden;
22 }
23
24 #dividerBar {
25     position: absolute;
26     bottom: 0;
27     left: 0;
28     right: 0;
29     height: 24px;
30     background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackground.png);
31     background-repeat: no-repeat, repeat-x;
32     background-position: right center, center;
33     cursor: row-resize;
34 }
35
36 #searchArea {
37     position: absolute;
38     background-color: #f1f1f1;
39     top: 100%;
40     bottom: 0;
41     left: 0;
42     right: 0;
43 }
44
45 input[type="search"] {
46     -webkit-appearance: searchfield;
47 }
48
49 #searchField {
50     position: absolute;
51     left: 10px;
52     right: 10px;
53     top: 10px;
54 }
55
56 #searchResults {
57     position: absolute;
58     left: 0;
59     right: 0;
60     top: 40px;
61     bottom: 0;
62     margin: 0;
63     padding: 0;
64     overflow: auto;
65     list-style-position: inside;
66 }
67
68 #searchResults li {
69     padding: 10px;
70 }
71
72 .colorIndicator {
73     display: inline-block;
74     width: 20px;
75     height: 1em;
76     vertical-align: -2px;
77     border: 1px black solid;
78     margin-right: 5px;
79 }
80
81 .colorIndicator.home {
82     background-color: #00a700
83 }
84
85 .colorIndicator.work {
86     background-color: #004ee2
87 }
88
89 #gridView {
90     position: absolute;
91     left: 171px;
92     right: 0;
93     top: 0;
94     bottom: 0;
95     background: #ffffff;
96 }
97
98 #gridView.inactive {
99     opacity: 0.5;
100 }
101
102 #eventOverlay {
103     position: absolute;
104     left: 171px;
105     right: 0;
106     top: 0;
107     bottom: 0;
108     background: rgba(0, 0, 0, 0.2);
109     z-index: auto;
110     opacity: 0;
111     -webkit-transition: opacity 0.2s ease-in;
112 }
113
114 #eventOverlay.show {
115     opacity: 1;
116     -webkit-transition-property: opacity, z-index;
117     -webkit-transition-duration: 1s, 0;
118     -webkit-transition-delay: 0, 0.5s;
119     -webkit-transition-timing-function: ease-out, linear;
120     z-index: 1000;
121 }
122
123 #details {
124     position: absolute;
125     background: white;
126     left: 30%;
127     right: 30%;
128     top: 20%;
129     bottom: 20%;
130     overflow: hidden;
131     -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
132     -webkit-border-radius: 8px;
133     padding: 30px;
134     font-size: 12px;
135     -webkit-transition-property: top, bottom;
136     -webkit-transition-duration: 0.5s, 0.5s;
137 }
138
139 #eventTitle {
140     font-size: 20px;
141 }
142
143 #details *:focus {
144     outline: none;
145     -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
146 }
147
148 #details dt {
149     width: 20%;
150     float: left;
151     clear: both;
152     color: #999;
153     text-align: right;
154     margin-top: 10px;
155 }
156
157 #details dd {
158     display: inline-block;
159     width: 70%;
160     float: left;
161     margin-left: 5%;
162     margin-top: 10px;
163     display: inline-block;
164     text-align: left;
165 }
166
167 #details input {
168     position: absolute;
169     bottom: 15px;
170     right: 15px;
171 }
172
173 #eventDisclosureArrow {
174     display: none;
175     float: left;
176     width: 12px;
177     height: 12px;
178     background-position: 1px left;
179     background-repeat: no-repeat;
180     background-image: url("Images/disclosureTriangleSmallRight.png");
181 }
182
183 #eventDisclosureArrow.show {
184     display: inline-block;
185 }
186
187 #eventDisclosureArrow.expanded {
188     background-image: url("Images/disclosureTriangleSmallDown.png");
189 }
190
191 #map {
192     display: none;
193     width: 100%;
194     min-width: 200px;
195     height: 180px;
196     overflow: hidden;
197     opacity: 0;
198     -webkit-transition: opacity 1s linear;
199 }
200
201 #map.show {
202     opacity: 1;
203     display: block;
204 }
205
206 #mapImage {
207     width: 100%;
208 }
209
210 #details.showingMap {
211     top: 10%;
212     bottom: 10%;
213     -webkit-transition-property: top, bottom;
214     -webkit-transition-duration: 0.5s, 0.5s;
215 }
216
217 #eventFrom .time, #eventTo .time {
218     display: inline-block;
219     min-width: 5px;
220     max-width: 20px;
221 }
222
223 #sidePanel h3 {
224     color: #5c6e91;
225     font-size: 11px;
226     text-shadow: 0.1em 0.1em #e5ebee;
227     margin-left: 20px;
228     margin-bottom: 4px;
229 }
230
231 #calendarList {
232     list-style: none;
233     margin: 0;
234     padding: 0;
235 }
236
237 #calendarList li {
238     padding-left: 23px;
239 }
240
241 #calendarList li.selected {
242     border-top: 1px solid #4580c8;
243     background: -webkit-gradient(linear, left top, left bottom, from(#5b93d5), to(#1553aa));
244     color: white;
245     font-weight: bold;
246     text-shadow: 0.1em 0.1em #6c6c6c;
247 }
248
249 #calendarList input {
250     margin-right: 5px;
251 }
252
253 #gridView h2 {
254     margin-top: 8px;
255     margin-bottom: 5px;
256     text-align: center;
257     color: #3f3f3f;
258     font-size: 19px;
259     font-weight: bolder;
260 }
261
262 #gridView .navButtonGroup {
263     text-align: center;
264 }
265
266 .navButton {
267     font-size: 14px;
268     font-weight: bold;
269     vertical-align: top;
270 }
271
272 #daysHeader {
273     margin-top: 5px;
274 }
275
276 .day {
277     display: inline-block;
278     width: 14%;
279     float: left;
280     -webkit-box-sizing: border-box;
281 }
282
283 /* REVIEW - trying to get these days to have their widths nicely divided */
284 .day:nth-child(7n+1), .day:nth-child(7n+7) {
285     width: 15%;
286 }
287
288 .day.title {
289     color: #626262;
290     text-align: center;
291 }
292
293 #daysGrid {
294     position: absolute;
295     left: 0;
296     right: 0;
297     top: 80px;
298     bottom: 0;
299 }
300
301 .day.box {
302     height: 20%;
303     border: 1px #ccc;
304     border-top-style: solid;
305     border-right-style: solid;
306     position: relative;
307 }
308
309 .day.box.today {
310     background-color: #e5ecf7;
311 }
312
313 .day.box:nth-child(7n+7) {
314     border-right-style: none;
315 }
316
317 .day .date {
318     color: #212121;
319     text-align: right;
320     font-size: 12px;
321     padding-right: 5px;
322     padding-top: 5px;
323 }
324
325 .day.box.notThisMonth .date {
326     color: #a6a6a6;
327 }
328
329 .day .contents {
330     position: absolute;
331     left: 0;
332     right: 0;
333     top: 20px;
334     bottom: 0;
335     overflow: auto;
336     margin-top: 0;
337     margin-bottom: 0;
338     margin-left: 0;
339     padding: 2px 0;
340     list-style-position: inside;
341     color: orange;
342 }
343
344 .day .contents li {
345     background-color: rgba(255, 255, 255, 0);
346     padding-left: 8px;
347     padding-right: 8px;
348 }
349
350 li.home {
351     color: #00a700;
352 }
353
354 li.home.selected {
355     color: #fff;
356     background: #00a700;
357 }
358
359 li.work {
360     color: #004ee2;
361 }
362
363 li.work.selected {
364     color: #fff;
365     background: #004ee2;
366 }
367
368 li.highlighted {
369     background-color: #ffa !important;
370 }
371
372 /* Online Status */
373 #onlineStatusIcon {
374     width: 44px;
375     height: 32px;
376     margin-right: 8px;
377     display: inline-block;
378     float: right;
379     background-image: url("Images/AirPort4.png");
380 }
381
382 #onlineStatusIcon.offline {
383     background-image: url("Images/AirPortError.png");
384 }