Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
quarto-dev
GitHub Repository: quarto-dev/quarto-cli
 Path: blob/main/src/resources/formats/revealjs/plugins/menu/menu.css
12923 views
1
.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
 */

342
body.print-pdf .slide-menu-wrapper .slide-menu,

343
body.print-pdf .reveal .slide-menu-button,

344
body.print-pdf .slide-menu-wrapper .slide-menu-overlay {

345
  display: none;

346
}

347


348