]> git.plutz.net Git - clickslide/blob - autoslide.css
34ba18073ec9b506605a022b01e90d30d1b13fc8
[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   text-align: center;
102 }
103
104 div.slide:after {
105   position: absolute;
106   bottom: 0; left: 0;
107   width: 100%;
108   font-size: .75em;
109   line-height: 1.5em;
110   text-align: left;
111   content: attr(count) " /";
112   padding-left: 4em;
113   background-color: #EEE;
114   color: #888;
115 }
116
117 div.slide > * {
118   vertical-align: middle;
119   text-align: left;
120 }
121
122 div.slide h1 {
123   left: 0; right: 0;
124   display: block;
125   text-align: center;
126   font-size: 1.5em;
127   background-color: #EEE;
128   padding: .25em 1em;
129   margin-left: -1em;
130   margin-right: -1em;
131 }
132
133 div.slide ul,
134 div.slide ol {
135   width: fit-content;
136   margin: .25em auto;
137 }
138
139 /* ==== Slide Display ==== */
140
141 div.slide:target {
142   position: fixed;
143   z-index: 2;
144   top: 0; bottom: 0; left: 0; right: 0;
145   width: auto; height: auto;
146   margin: 0;
147   border: none;
148   font-size: 24pt;
149 }
150 div.slide:target + a,
151 div.slide:target + a + a {
152   position: static;
153   display: block;
154   font-size: 18pt;
155   line-height: 1em;
156   color: #888;
157 }
158 :target + a:before, :target + a + a:before {
159   display: block;
160   position: fixed;
161   bottom: 0;
162   font-size: 18pt;
163   color: #888;
164   padding: 0 1em .25em 1em;
165   z-index: 3;
166 }
167 :target + a:before { left:  0; }
168 :target + a:before { content: '\22d8'; }
169 :target + a + a:before { right: 0; }
170 :target + a + a:before { content: '\22d9'; }
171
172 :target .uncover { color: #DDD; }
173 :target .uncover:hover { color: #000; }
174 :target .uncover *:first-child { height: 0; }
175 :target .uncover *:first-child:before,
176 :target .uncover *:hover:before,
177 :target .uncover *:active + *:before {
178   content: ' ';
179   position: fixed;
180   top: 0; bottom: 0;
181   left: 0; right: 0;
182 }
183 :target .uncover *:hover ~ * { color: #DDD; }
184 :target .uncover *:active:before { display: none; }