]> git.plutz.net Git - clickslide/blob - clickslide.css
use checkbox hack for cleaner item uncovering
[clickslide] / clickslide.css
1 * {
2   box-sizing: border-box;
3   margin: 0; padding: 0;
4 }
5
6 body {
7   font-family: sans-serif;
8   padding: 2em 1em 6em 1em;
9   background-color: #555;
10   text-align: center;
11   overflow-x: hidden;
12 }
13 body * { text-align: left; }
14
15 body:after {
16   position: fixed;
17   bottom: 0; left: 0;
18   width: 100%;
19   background-color: #EEE;
20   height: 30pt;
21   content: ' ';
22 }
23
24 a.previous, a.next ,a.toplevel {
25   text-decoration: none;
26 }
27
28 footer {
29   position: fixed;
30   bottom: 0; left: 0;
31   width: 100%;
32   font-size: 14pt; line-height: 14pt;
33   padding: .5em 4em .5em 12em;
34   text-align: center;
35   #background-color: #EEE;
36   color: #888;
37   z-index: 3;
38 }
39 footer:before {
40   content: ' ';
41   position: absolute;
42   top: 0; left: 0;
43   bottom: 28pt;
44   width: 100%;
45   background-color: #EEE;
46   z-index: -1;
47 }
48
49 body a.toplevel {
50   position: fixed;
51   bottom: 0; left: 8em;
52   width: 2ex; overflow: hidden;
53   font-size: 18pt;
54   padding-bottom: .25em;
55   color: #EEE;
56   z-index: 4;
57 }
58 body a.toplevel:before {
59   color: #888;
60   content: '\2ba4'
61 }
62
63 body span.count {
64   position: fixed;
65   bottom: 0; left: 6.25em;
66   font-size: 18pt;
67   padding-bottom: .125em;
68   color: #888;
69   z-index: 4;
70 }
71
72 /* ==== Overview Screen ==== */
73
74 div.slide {
75   position: relative;
76   display: inline-block;
77   overflow: hidden;
78   width: 20em; height: 15em;
79   margin-left: -20em;
80   border: 1px solid black;
81   font-size: 6pt;
82 }
83
84 div.slide + a { display: none; }
85 a.nextslide {
86   display: inline-block;
87   position: relative;
88   vertical-align: top;
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   background: #FFF no-repeat center;
100   text-align: center;
101   line-height: 1.5em;
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   margin-top: 1em;
119   text-align: left;
120   max-width: 100%;
121   z-index: 3;
122 }
123
124 div.slide h1, div.slide h2 {
125   display: block;
126   background-color: #EEE;
127   text-align: center;
128   font-size: 1.5em;
129   margin-top: 0;
130   margin-bottom: 1em;
131   width: 100%;
132 }
133
134 div.slide h1 {
135   position: absolute;
136   top: 50%; left: 0; right: 0;
137   transform: translate(0, -50%);
138   padding: .5em 2em;
139   z-index: 0;
140 }
141
142 div.slide h2 {
143   padding: .25em 1em;
144 }
145
146 div.slide ul,
147 div.slide ol {
148   width: fit-content;
149   margin: .25em auto;
150 }
151
152 /* ==== Slide Display ==== */
153
154 div.slide:target {
155   position: fixed;
156   z-index: 2;
157   top: 0; bottom: 0; left: 0; right: 0;
158   width: auto; height: 100%;
159   margin: 0;
160   border: none;
161   font-size: 24pt;
162 }
163 div.slide:target + a,
164 div.slide:target + a + a {
165   position: static;
166   display: block;
167   font-size: 18pt;
168   line-height: 1em;
169   color: #888;
170 }
171 :target + a:before, :target + a + a:before {
172   display: block;
173   position: fixed;
174   bottom: 0;
175   font-size: 18pt;
176   color: #888;
177   padding: 0 1em .25em 1em;
178   z-index: 3;
179 }
180 :target + a:before { left:  0; }
181 :target + a:before { content: '\22d8'; }
182 :target + a + a:before { right: 0; }
183 :target + a + a:before { content: '\22d9'; }
184
185 .uncover[type="checkbox"] + * { opacity: .2; }
186 .uncover[type="checkbox"]:checked + * { opacity: 1; }
187
188 .uncover[type="checkbox"] {
189   position: fixed;
190   top: 0; bottom: 0; left: 0; right: 0;
191   width: 100%; height: 100%;
192   opacity: 0;
193 }
194
195 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
196 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
197 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
198 .uncover[type="checkbox"]:checked { display: none; }
199