/
demo-fullscreen.css
115 lines (98 loc) · 3.1 KB
/
demo-fullscreen.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
* TrackpadScrollEmulator Fullscreen demo.
* Author: Jonathan Nicol @f6design
*
* These styles are not required for TrackpadScrollEmulator
* to function. They are used only for styling the demo.
*/
/* Global reset
html5doctor.com/html-5-reset-stylesheet/
*****************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
/* General page styles
*****************************************************************/
body, html {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
p {
margin: 1em 0;
}
.tse-content {
background-color: #DDD;
}
/* Scrollable elements
*****************************************************************/
.demo-fullscreen {
width: 100%;
height: 100%;
}
.demo-fullscreen p {
margin: 0;
padding: 10px;
}
.demo-fullscreen p.odd {
background: #f0f0f0;
}
.demo-fullscreen.horizontal .tse-content {
display: inline-block; /* allows element to expand outside container without setting explicit width */
white-space: nowrap; /* allows element to expand outside container without setting explicit width */
}
/* Box styling is purely for demo puposes. Your scrollable content can be styled however you like. */
.demo-fullscreen.horizontal .boxes {
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
padding: 20px;
height: 100%;
}
.demo-fullscreen.horizontal .box {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin-right: 10px;
padding: 20px;
width: 300px;
height: 100%;
color: #fff;
font-size: 24px;
background: #666;
}