]> git.plutz.net Git - clickslide/blob - autoslide.css
97c17b70423b9e449381904fe5a26dc7078f2b65
[clickslide] / autoslide.css
1 * {
2   box-sizing: border-box;
3   margin: 0; padding: 0;
4 }
5
6 body {
7   padding: 2em 1em 6em 1em;
8   background-color: #555;
9   text-align: center;
10   overflow-x: hidden;
11 }
12 body * { text-align: left; }
13
14 body:after {
15   position: fixed;
16   bottom: 0; left: 0;
17   width: 100%;
18   background-color: #EEE;
19   height: 30pt;
20   content: ' ';
21 }
22
23 a.previous, a.next ,a.toplevel {
24   text-decoration: none;
25 }
26
27 footer {
28   position: fixed;
29   bottom: 0; left: 0;
30   width: 100%;
31   font-size: 14pt; line-height: 14pt;
32   padding: .5em 4em .5em 12em;
33   text-align: center;
34   #background-color: #EEE;
35   color: #888;
36   z-index: 3;
37 }
38 footer:before {
39   content: ' ';
40   position: absolute;
41   top: 0; left: 0;
42   bottom: 28pt;
43   width: 100%;
44   background-color: #EEE;
45   z-index: -1;
46 }
47
48 body a.toplevel {
49   position: fixed;
50   bottom: 0; left: 8em;
51   width: 2ex; overflow: hidden;
52   font-size: 18pt;
53   padding-bottom: .25em;
54   color: #EEE;
55   z-index: 4;
56 }
57 body a.toplevel:before {
58   color: #888;
59   content: '\2ba4'
60 }
61
62 body span.count {
63   position: fixed;
64   bottom: 0; left: 6.25em;
65   font-size: 18pt;
66   padding-bottom: .125em;
67   color: #888;
68   z-index: 4;
69 }
70
71 /* ==== Overview Screen ==== */
72
73 div.slide {
74   position: relative;
75   display: inline-block;
76   overflow: hidden;
77   width: 20em; height: 15em;
78   margin-left: -20em;
79   border: 1px solid black;
80   font-size: 6pt;
81 }
82
83 div.slide + a { display: none; }
84 a.nextslide {
85   display: inline-block;
86   position: relative;
87   vertical-align: top;
88   #margin-left: 2em;
89   font-size: 6pt;
90   width: 20em; line-height: 15em;
91   color: rgba(0, 0, 0, 0);
92   z-index: 1;
93 }
94 div.slide:nth-of-type(1) { margin-right: .5em; }
95
96 /* ==== Slide Appearance ==== */
97
98 div.slide {
99   padding: 0 1em;
100   background-color: #FFF;
101 }
102
103 div.slide:after {
104   position: absolute;
105   bottom: 0; width: 100%;
106   font-size: .75em;
107   line-height: 1.5em;
108   content: attr(count) " /";
109   padding-left: 4em;
110   margin-left: -1.25em;
111   margin-right: -1.25em;
112   background-color: #EEE;
113   color: #888;
114 }
115
116 h1 {
117   left: 0; right: 0;
118   display: block;
119   text-align: center;
120   font-size: 1.5em;
121   background-color: #EEE;
122   padding: .25em 1em;
123   margin-left: -1em;
124   margin-right: -1em;
125 }
126
127 div.slide ul li, div.slide ol {
128   indent: 20em;
129 }
130
131 /* ==== Slide Display ==== */
132
133 div.slide:target {
134   position: fixed;
135   z-index: 2;
136   top: 0; bottom: 0; left: 0; right: 0;
137   width: auto; height: auto;
138   margin: 0;
139   border: none;
140   font-size: 24pt;
141 }
142 div.slide:target + a,
143 div.slide:target + a + a {
144   position: static;
145   display: block;
146   font-size: 18pt;
147   line-height: 1em;
148   color: #888;
149 }
150 :target + a:before, :target + a + a:before {
151   display: block;
152   position: fixed;
153   bottom: 0;
154   font-size: 18pt;
155   color: #888;
156   padding: 0 1em .25em 1em;
157   z-index: 3;
158 }
159 :target + a:before { left:  0; }
160 :target + a:before { content: '\22d8'; }
161 :target + a + a:before { right: 0; }
162 :target + a + a:before { content: '\22d9'; }
163
164 :target .uncover { color: #DDD; }
165 :target .uncover:hover { color: #000; }
166 :target .uncover *:first-child { height: 0; }
167 :target .uncover *:first-child:before,
168 :target .uncover *:hover:before,
169 :target .uncover *:active + *:before {
170   content: ' ';
171   position: fixed;
172   top: 0; bottom: 0;
173   left: 0; right: 0;
174 }
175 :target .uncover *:hover ~ * { color: #DDD; }
176 :target .uncover *:active:before { display: none; }