blob: 274b55cbe4f1606a363a13029458db6a0c59da23 [file] [log] [blame]
JJ Allaire064552c2017-02-10 10:28:41 -05001.reveal .slide-menu {
2 background-color: #333;
3 z-index: 200;
4 position: fixed;
5 top: 0;
6 width: 300px;
7 height: 100%;
8 /*overflow-y: scroll;*/
9 transition: transform 0.3s;
10 font-size: 16px;
11 font-weight: normal;
12}
13
14/*
15 * Slides menu
16 */
17
18.reveal .slide-menu-items {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 border-bottom: solid 1px #555;
23}
24
25.reveal .slide-menu-item,
26.reveal .slide-menu-item-vertical {
27 display: block;
28 text-align: left;
29 padding: 10px 18px;
30 color: #aaa;
31 cursor: pointer;
32}
33
34.reveal .slide-menu-item-vertical {
35 padding-left: 30px;
36}
37
38.reveal .slide-menu-item {
39 border-top: solid 1px #555;
40}
41
42.reveal .active-menu-panel li.selected {
43 background-color: #222;
44 color: white;
45}
46
47.reveal .active-menu-panel li.active {
48 color: #eee;
49}
50
51.reveal .slide-menu-item.no-title .slide-menu-item-title,
52.reveal .slide-menu-item-vertical.no-title .slide-menu-item-title {
53 font-style: italic;
54}
55
56.reveal .slide-menu-item-number {
57 color: #999;
58 padding-right:6px;
59}
60
61.reveal .slide-menu-item i.fa,
62.reveal .slide-menu-item-vertical i.fa {
63 padding-right: 12px;
64 display: none;
65}
66
67.reveal .slide-menu-item.past i.fa.past,
68.reveal .slide-menu-item-vertical.past i.fa.past,
69.reveal .slide-menu-item.active i.fa.active,
70.reveal .slide-menu-item-vertical.active i.fa.active,
71.reveal .slide-menu-item.future i.fa.future,
72.reveal .slide-menu-item-vertical.future i.fa.future {
73 display: inline-block;
74}
75
76.reveal .slide-menu-item i.fa,
77.reveal .slide-menu-item-vertical i.fa {
78 opacity: 0.4;
79}
80
81.reveal .slide-menu--left {
82 left: 0;
83 -webkit-transform: translateX(-300px);
84 -ms-transform: translateX(-300px);
85 transform: translateX(-300px);
86}
87
88.reveal .slide-menu--left.active {
89 -webkit-transform: translateX(0);
90 -ms-transform: translateX(0);
91 transform: translateX(0);
92}
93
94.reveal .slide-menu--right {
95 right: 0;
96 -webkit-transform: translateX(300px);
97 -ms-transform: translateX(300px);
98 transform: translateX(300px);
99}
100
101.reveal .slide-menu--right.active {
102 -webkit-transform: translateX(0);
103 -ms-transform: translateX(0);
104 transform: translateX(0);
105}
106
107.reveal {
108 transition: transform 0.3s;
109}
110
111
112/*
113 * Toolbar
114 */
115.reveal .slide-menu-toolbar {
116 height: 60px;
117 width: 100%;
118 font-size: 12px;
119 display: table;
120 table-layout: fixed; /* ensures equal width */
121 margin: 0;
122 padding: 0;
123 border-bottom: solid 2px #666;
124}
125
126.reveal .slide-menu-toolbar > li {
127 display: table-cell;
128 line-height: 150%;
129 text-align: center;
130 vertical-align: middle;
131 cursor: pointer;
132 color: #aaa;
133 border-radius: 3px;
134}
135
136.reveal .slide-menu-toolbar > li.active-toolbar-button {
137 color: white;
138 text-shadow: 0 1px black;
139}
140
141.slide-menu-toolbar > li:hover {
142 color: white;
143}
144
145/*
146 * Panels
147 */
148.reveal .slide-menu-panel {
149 position: absolute;
150 width: 100%;
151 visibility: hidden;
152 height: calc(100% - 60px);
153 overflow-x: hidden;
154 overflow-y: auto;
155 color: #AAA;
156}
157
158.reveal .slide-menu-panel.active-menu-panel {
159 visibility: visible;
160}
161
162.reveal .slide-menu-panel h1,
163.reveal .slide-menu-panel h2,
164.reveal .slide-menu-panel h3,
165.reveal .slide-menu-panel h4,
166.reveal .slide-menu-panel h5,
167.reveal .slide-menu-panel h6 {
168 margin: 20px 0 10px 0;
169 color: #FFF;
170 line-height: 1.2;
171 letter-spacing: normal;
172 text-shadow: none;
173}
174
175.reveal .slide-menu-panel h1 {
176 font-size: 1.6em;
177}
178.reveal .slide-menu-panel h2 {
179 font-size: 1.4em;
180}
181.reveal .slide-menu-panel h3 {
182 font-size: 1.3em;
183}
184.reveal .slide-menu-panel h4 {
185 font-size: 1.1em;
186}
187.reveal .slide-menu-panel h5 {
188 font-size: 1em;
189}
190.reveal .slide-menu-panel h6 {
191 font-size: 0.9em;
192}
193
194.reveal .slide-menu-panel p {
195 margin: 10px 0 5px 0;
196}
197
198.reveal .slide-menu-panel a {
199 color: #CCC;
200 text-decoration: underline;
201}
202
203.reveal .slide-menu-panel a:hover {
204 color: white;
205}
206
207.reveal .slide-menu-item a {
208 text-decoration: none;
209}
210
211.reveal .slide-menu-custom-panel {
212 width: calc(100% - 20px);
213 padding-left: 10px;
214 padding-right: 10px;
215}
216
217.reveal .slide-menu-custom-panel .slide-menu-items {
218 width: calc(100% + 20px);
219 margin-left: -10px;
220 margin-right: 10px;
221}
222
223
224/*
225 * Theme and Transitions buttons
226 */
227
228.reveal div[data-panel="Themes"] li,
229.reveal div[data-panel="Transitions"] li {
230 display: block;
231 text-align: left;
232 cursor: pointer;
233 color: #848484;
234}
235
236/*
237 * Menu controls
238 */
239.reveal .slide-menu-button {
240 position: fixed;
241 left: 30px;
242 bottom: 30px;
243 z-index: 30;
244 font-size: 24px;
245}
246
247/*
248 * Menu overlay
249 */
250
251.reveal .slide-menu-overlay {
252 position: fixed;
253 z-index: 199;
254 top: 0;
255 left: 0;
256 overflow: hidden;
257 width: 0;
258 height: 0;
259 background-color: #000;
260 opacity: 0;
261 transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
262}
263
264.reveal .slide-menu-overlay.active {
265 width: 100%;
266 height: 100%;
267 opacity: 0.7;
268 transition: opacity 0.3s;
269}