.slide-menu-wrapper { font-family: 'Source Sans Pro', Helvetica, sans-serif; } .slide-menu-wrapper .slide-menu { background-color: #333; z-index: 200; position: fixed; top: 0; width: 300px; height: 100%; /*overflow-y: scroll;*/ transition: transform 0.3s; font-size: 16px; font-weight: normal; } .slide-menu-wrapper .slide-menu.slide-menu--wide { width: 500px; } .slide-menu-wrapper .slide-menu.slide-menu--third { width: 33%; } .slide-menu-wrapper .slide-menu.slide-menu--half { width: 50%; } .slide-menu-wrapper .slide-menu.slide-menu--full { width: 95%; } /* * Slides menu */ .slide-menu-wrapper .slide-menu-items { margin: 0; padding: 0; width: 100%; border-bottom: solid 1px #555; } .slide-menu-wrapper .slide-menu-item, .slide-menu-wrapper .slide-menu-item-vertical { display: block; text-align: left; padding: 10px 18px; color: #aaa; cursor: pointer; } .slide-menu-wrapper .slide-menu-item-vertical { padding-left: 30px; } .slide-menu-wrapper .slide-menu--wide .slide-menu-item-vertical, .slide-menu-wrapper .slide-menu--third .slide-menu-item-vertical, .slide-menu-wrapper .slide-menu--half .slide-menu-item-vertical, .slide-menu-wrapper .slide-menu--full .slide-menu-item-vertical, .slide-menu-wrapper .slide-menu--custom .slide-menu-item-vertical { padding-left: 50px; } .slide-menu-wrapper .slide-menu-item { border-top: solid 1px #555; } .slide-menu-wrapper .active-menu-panel li.selected { background-color: #222; color: white; } .slide-menu-wrapper .active-menu-panel li.active { color: #eee; } .slide-menu-wrapper .slide-menu-item.no-title .slide-menu-item-title, .slide-menu-wrapper .slide-menu-item-vertical.no-title .slide-menu-item-title { font-style: italic; } .slide-menu-wrapper .slide-menu-item-number { color: #999; padding-right: 6px; } .slide-menu-wrapper .slide-menu-item i.far, .slide-menu-wrapper .slide-menu-item i.fas, .slide-menu-wrapper .slide-menu-item-vertical i.far, .slide-menu-wrapper .slide-menu-item-vertical i.fas, .slide-menu-wrapper .slide-menu-item svg.svg-inline--fa, .slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa { padding-right: 12px; display: none; } .slide-menu-wrapper .slide-menu-item.past i.fas.past, .slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past, .slide-menu-wrapper .slide-menu-item.active i.fas.active, .slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active, .slide-menu-wrapper .slide-menu-item.future i.far.future, .slide-menu-wrapper .slide-menu-item-vertical.future i.far.future, .slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past, .slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past, .slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active, .slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active, .slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future, .slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future { display: inline-block; } .slide-menu-wrapper .slide-menu-item.past i.fas.past, .slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past, .slide-menu-wrapper .slide-menu-item.future i.far.future, .slide-menu-wrapper .slide-menu-item-vertical.future i.far.future, .slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past, .slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past, .slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future, .slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future { opacity: 0.4; } .slide-menu-wrapper .slide-menu-item.active i.fas.active, .slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active, .slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active, .slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active { opacity: 0.8; } .slide-menu-wrapper .slide-menu--left { left: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .slide-menu-wrapper .slide-menu--left.active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slide-menu-wrapper .slide-menu--right { right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .slide-menu-wrapper .slide-menu--right.active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slide-menu-wrapper { transition: transform 0.3s; } /* * Toolbar */ .slide-menu-wrapper .slide-menu-toolbar { height: 60px; width: 100%; font-size: 12px; display: table; table-layout: fixed; /* ensures equal width */ margin: 0; padding: 0; border-bottom: solid 2px #666; } .slide-menu-wrapper .slide-menu-toolbar > li { display: table-cell; line-height: 150%; text-align: center; vertical-align: middle; cursor: pointer; color: #aaa; border-radius: 3px; } .slide-menu-wrapper .slide-menu-toolbar > li.toolbar-panel-button i, .slide-menu-wrapper .slide-menu-toolbar > li.toolbar-panel-button svg.svg-inline--fa { font-size: 1.7em; } .slide-menu-wrapper .slide-menu-toolbar > li.active-toolbar-button { color: white; text-shadow: 0 1px black; text-decoration: underline; } .slide-menu-toolbar > li.toolbar-panel-button:hover { color: white; } .slide-menu-toolbar > li.toolbar-panel-button:hover span.slide-menu-toolbar-label, .slide-menu-wrapper .slide-menu-toolbar > li.active-toolbar-button span.slide-menu-toolbar-label { visibility: visible; } /* * Panels */ .slide-menu-wrapper .slide-menu-panel { position: absolute; width: 100%; visibility: hidden; height: calc(100% - 60px); overflow-x: hidden; overflow-y: auto; color: #aaa; } .slide-menu-wrapper .slide-menu-panel.active-menu-panel { visibility: visible; } .slide-menu-wrapper .slide-menu-panel h1, .slide-menu-wrapper .slide-menu-panel h2, .slide-menu-wrapper .slide-menu-panel h3, .slide-menu-wrapper .slide-menu-panel h4, .slide-menu-wrapper .slide-menu-panel h5, .slide-menu-wrapper .slide-menu-panel h6 { margin: 20px 0 10px 0; color: #fff; line-height: 1.2; letter-spacing: normal; text-shadow: none; } .slide-menu-wrapper .slide-menu-panel h1 { font-size: 1.6em; } .slide-menu-wrapper .slide-menu-panel h2 { font-size: 1.4em; } .slide-menu-wrapper .slide-menu-panel h3 { font-size: 1.3em; } .slide-menu-wrapper .slide-menu-panel h4 { font-size: 1.1em; } .slide-menu-wrapper .slide-menu-panel h5 { font-size: 1em; } .slide-menu-wrapper .slide-menu-panel h6 { font-size: 0.9em; } .slide-menu-wrapper .slide-menu-panel p { margin: 10px 0 5px 0; } .slide-menu-wrapper .slide-menu-panel a { color: #ccc; text-decoration: underline; } .slide-menu-wrapper .slide-menu-panel a:hover { color: white; } .slide-menu-wrapper .slide-menu-item a { text-decoration: none; } .slide-menu-wrapper .slide-menu-custom-panel { width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; } .slide-menu-wrapper .slide-menu-custom-panel .slide-menu-items { width: calc(100% + 20px); margin-left: -10px; margin-right: 10px; } /* * Theme and Transitions buttons */ .slide-menu-wrapper div[data-panel='Themes'] li, .slide-menu-wrapper div[data-panel='Transitions'] li { display: block; text-align: left; cursor: pointer; color: #848484; } /* * Menu controls */ .reveal .slide-menu-button { position: fixed; left: 30px; bottom: 30px; z-index: 30; font-size: 24px; } /* * Menu overlay */ .slide-menu-wrapper .slide-menu-overlay { position: fixed; z-index: 199; top: 0; left: 0; overflow: hidden; width: 0; height: 0; background-color: #000; opacity: 0; transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; } .slide-menu-wrapper .slide-menu-overlay.active { width: 100%; height: 100%; opacity: 0.7; transition: opacity 0.3s; } /* * Hide menu for pdf printing */ body.print-pdf .slide-menu-wrapper .slide-menu, body.print-pdf .reveal .slide-menu-button, body.print-pdf .slide-menu-wrapper .slide-menu-overlay { display: none; }