blob: 5a300fdf63f758dc86e6d9f2ad8b543ea444cd9f [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02001.slide-menu-wrapper {
2 font-family: 'Source Sans Pro', Helvetica, sans-serif;
3}
4
5.slide-menu-wrapper .slide-menu {
6 background-color: #333;
7 z-index: 200;
8 position: fixed;
9 top: 0;
10 width: 300px;
11 height: 100%;
12 /*overflow-y: scroll;*/
13 transition: transform 0.3s;
14 font-size: 16px;
15 font-weight: normal;
16}
17
18.slide-menu-wrapper .slide-menu.slide-menu--wide {
19 width: 500px;
20}
21
22.slide-menu-wrapper .slide-menu.slide-menu--third {
23 width: 33%;
24}
25
26.slide-menu-wrapper .slide-menu.slide-menu--half {
27 width: 50%;
28}
29
30.slide-menu-wrapper .slide-menu.slide-menu--full {
31 width: 95%;
32}
33
34/*
35 * Slides menu
36 */
37
38.slide-menu-wrapper .slide-menu-items {
39 margin: 0;
40 padding: 0;
41 width: 100%;
42 border-bottom: solid 1px #555;
43}
44
45.slide-menu-wrapper .slide-menu-item,
46.slide-menu-wrapper .slide-menu-item-vertical {
47 display: block;
48 text-align: left;
49 padding: 10px 18px;
50 color: #aaa;
51 cursor: pointer;
52}
53
54.slide-menu-wrapper .slide-menu-item-vertical {
55 padding-left: 30px;
56}
57
58.slide-menu-wrapper .slide-menu--wide .slide-menu-item-vertical,
59.slide-menu-wrapper .slide-menu--third .slide-menu-item-vertical,
60.slide-menu-wrapper .slide-menu--half .slide-menu-item-vertical,
61.slide-menu-wrapper .slide-menu--full .slide-menu-item-vertical,
62.slide-menu-wrapper .slide-menu--custom .slide-menu-item-vertical {
63 padding-left: 50px;
64}
65
66.slide-menu-wrapper .slide-menu-item {
67 border-top: solid 1px #555;
68}
69
70.slide-menu-wrapper .active-menu-panel li.selected {
71 background-color: #222;
72 color: white;
73}
74
75.slide-menu-wrapper .active-menu-panel li.active {
76 color: #eee;
77}
78
79.slide-menu-wrapper .slide-menu-item.no-title .slide-menu-item-title,
80.slide-menu-wrapper .slide-menu-item-vertical.no-title .slide-menu-item-title {
81 font-style: italic;
82}
83
84.slide-menu-wrapper .slide-menu-item-number {
85 color: #999;
86 padding-right: 6px;
87}
88
89.slide-menu-wrapper .slide-menu-item i.far,
90.slide-menu-wrapper .slide-menu-item i.fas,
91.slide-menu-wrapper .slide-menu-item-vertical i.far,
92.slide-menu-wrapper .slide-menu-item-vertical i.fas,
93.slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
94.slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
95 padding-right: 12px;
96 display: none;
97}
98
99.slide-menu-wrapper .slide-menu-item.past i.fas.past,
100.slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past,
101.slide-menu-wrapper .slide-menu-item.active i.fas.active,
102.slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active,
103.slide-menu-wrapper .slide-menu-item.future i.far.future,
104.slide-menu-wrapper .slide-menu-item-vertical.future i.far.future,
105.slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past,
106.slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past,
107.slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active,
108.slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active,
109.slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future,
110.slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future {
111 display: inline-block;
112}
113
114.slide-menu-wrapper .slide-menu-item.past i.fas.past,
115.slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past,
116.slide-menu-wrapper .slide-menu-item.future i.far.future,
117.slide-menu-wrapper .slide-menu-item-vertical.future i.far.future,
118.slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past,
119.slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past,
120.slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future,
121.slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future {
122 opacity: 0.4;
123}
124
125.slide-menu-wrapper .slide-menu-item.active i.fas.active,
126.slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active,
127.slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active,
128.slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active {
129 opacity: 0.8;
130}
131
132.slide-menu-wrapper .slide-menu--left {
133 left: 0;
134 -webkit-transform: translateX(-100%);
135 -ms-transform: translateX(-100%);
136 transform: translateX(-100%);
137}
138
139.slide-menu-wrapper .slide-menu--left.active {
140 -webkit-transform: translateX(0);
141 -ms-transform: translateX(0);
142 transform: translateX(0);
143}
144
145.slide-menu-wrapper .slide-menu--right {
146 right: 0;
147 -webkit-transform: translateX(100%);
148 -ms-transform: translateX(100%);
149 transform: translateX(100%);
150}
151
152.slide-menu-wrapper .slide-menu--right.active {
153 -webkit-transform: translateX(0);
154 -ms-transform: translateX(0);
155 transform: translateX(0);
156}
157
158.slide-menu-wrapper {
159 transition: transform 0.3s;
160}
161
162/*
163 * Toolbar
164 */
165.slide-menu-wrapper .slide-menu-toolbar {
166 height: 60px;
167 width: 100%;
168 font-size: 12px;
169 display: table;
170 table-layout: fixed; /* ensures equal width */
171 margin: 0;
172 padding: 0;
173 border-bottom: solid 2px #666;
174}
175
176.slide-menu-wrapper .slide-menu-toolbar > li {
177 display: table-cell;
178 line-height: 150%;
179 text-align: center;
180 vertical-align: middle;
181 cursor: pointer;
182 color: #aaa;
183 border-radius: 3px;
184}
185
186.slide-menu-wrapper .slide-menu-toolbar > li.toolbar-panel-button i,
187.slide-menu-wrapper
188 .slide-menu-toolbar
189 > li.toolbar-panel-button
190 svg.svg-inline--fa {
191 font-size: 1.7em;
192}
193
194.slide-menu-wrapper .slide-menu-toolbar > li.active-toolbar-button {
195 color: white;
196 text-shadow: 0 1px black;
197 text-decoration: underline;
198}
199
200.slide-menu-toolbar > li.toolbar-panel-button:hover {
201 color: white;
202}
203
204.slide-menu-toolbar
205 > li.toolbar-panel-button:hover
206 span.slide-menu-toolbar-label,
207.slide-menu-wrapper
208 .slide-menu-toolbar
209 > li.active-toolbar-button
210 span.slide-menu-toolbar-label {
211 visibility: visible;
212}
213
214/*
215 * Panels
216 */
217.slide-menu-wrapper .slide-menu-panel {
218 position: absolute;
219 width: 100%;
220 visibility: hidden;
221 height: calc(100% - 60px);
222 overflow-x: hidden;
223 overflow-y: auto;
224 color: #aaa;
225}
226
227.slide-menu-wrapper .slide-menu-panel.active-menu-panel {
228 visibility: visible;
229}
230
231.slide-menu-wrapper .slide-menu-panel h1,
232.slide-menu-wrapper .slide-menu-panel h2,
233.slide-menu-wrapper .slide-menu-panel h3,
234.slide-menu-wrapper .slide-menu-panel h4,
235.slide-menu-wrapper .slide-menu-panel h5,
236.slide-menu-wrapper .slide-menu-panel h6 {
237 margin: 20px 0 10px 0;
238 color: #fff;
239 line-height: 1.2;
240 letter-spacing: normal;
241 text-shadow: none;
242}
243
244.slide-menu-wrapper .slide-menu-panel h1 {
245 font-size: 1.6em;
246}
247.slide-menu-wrapper .slide-menu-panel h2 {
248 font-size: 1.4em;
249}
250.slide-menu-wrapper .slide-menu-panel h3 {
251 font-size: 1.3em;
252}
253.slide-menu-wrapper .slide-menu-panel h4 {
254 font-size: 1.1em;
255}
256.slide-menu-wrapper .slide-menu-panel h5 {
257 font-size: 1em;
258}
259.slide-menu-wrapper .slide-menu-panel h6 {
260 font-size: 0.9em;
261}
262
263.slide-menu-wrapper .slide-menu-panel p {
264 margin: 10px 0 5px 0;
265}
266
267.slide-menu-wrapper .slide-menu-panel a {
268 color: #ccc;
269 text-decoration: underline;
270}
271
272.slide-menu-wrapper .slide-menu-panel a:hover {
273 color: white;
274}
275
276.slide-menu-wrapper .slide-menu-item a {
277 text-decoration: none;
278}
279
280.slide-menu-wrapper .slide-menu-custom-panel {
281 width: calc(100% - 20px);
282 padding-left: 10px;
283 padding-right: 10px;
284}
285
286.slide-menu-wrapper .slide-menu-custom-panel .slide-menu-items {
287 width: calc(100% + 20px);
288 margin-left: -10px;
289 margin-right: 10px;
290}
291
292/*
293 * Theme and Transitions buttons
294 */
295
296.slide-menu-wrapper div[data-panel='Themes'] li,
297.slide-menu-wrapper div[data-panel='Transitions'] li {
298 display: block;
299 text-align: left;
300 cursor: pointer;
301 color: #848484;
302}
303
304/*
305 * Menu controls
306 */
307.reveal .slide-menu-button {
308 position: fixed;
309 left: 30px;
310 bottom: 30px;
311 z-index: 30;
312 font-size: 24px;
313}
314
315/*
316 * Menu overlay
317 */
318
319.slide-menu-wrapper .slide-menu-overlay {
320 position: fixed;
321 z-index: 199;
322 top: 0;
323 left: 0;
324 overflow: hidden;
325 width: 0;
326 height: 0;
327 background-color: #000;
328 opacity: 0;
329 transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
330}
331
332.slide-menu-wrapper .slide-menu-overlay.active {
333 width: 100%;
334 height: 100%;
335 opacity: 0.7;
336 transition: opacity 0.3s;
337}
338
339/*
340 * Hide menu for pdf printing
341 */
342body.print-pdf .slide-menu-wrapper .slide-menu,
343body.print-pdf .reveal .slide-menu-button,
344body.print-pdf .slide-menu-wrapper .slide-menu-overlay {
345 display: none;
346}