| .reveal .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; |
| } |
| |
| /* |
| * Slides menu |
| */ |
| |
| .reveal .slide-menu-items { |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| border-bottom: solid 1px #555; |
| } |
| |
| .reveal .slide-menu-item, |
| .reveal .slide-menu-item-vertical { |
| display: block; |
| text-align: left; |
| padding: 10px 18px; |
| color: #aaa; |
| cursor: pointer; |
| } |
| |
| .reveal .slide-menu-item-vertical { |
| padding-left: 30px; |
| } |
| |
| .reveal .slide-menu-item { |
| border-top: solid 1px #555; |
| } |
| |
| .reveal .active-menu-panel li.selected { |
| background-color: #222; |
| color: white; |
| } |
| |
| .reveal .active-menu-panel li.active { |
| color: #eee; |
| } |
| |
| .reveal .slide-menu-item.no-title .slide-menu-item-title, |
| .reveal .slide-menu-item-vertical.no-title .slide-menu-item-title { |
| font-style: italic; |
| } |
| |
| .reveal .slide-menu-item-number { |
| color: #999; |
| padding-right:6px; |
| } |
| |
| .reveal .slide-menu-item i.fa, |
| .reveal .slide-menu-item-vertical i.fa { |
| padding-right: 12px; |
| display: none; |
| } |
| |
| .reveal .slide-menu-item.past i.fa.past, |
| .reveal .slide-menu-item-vertical.past i.fa.past, |
| .reveal .slide-menu-item.active i.fa.active, |
| .reveal .slide-menu-item-vertical.active i.fa.active, |
| .reveal .slide-menu-item.future i.fa.future, |
| .reveal .slide-menu-item-vertical.future i.fa.future { |
| display: inline-block; |
| } |
| |
| .reveal .slide-menu-item i.fa, |
| .reveal .slide-menu-item-vertical i.fa { |
| opacity: 0.4; |
| } |
| |
| .reveal .slide-menu--left { |
| left: 0; |
| -webkit-transform: translateX(-300px); |
| -ms-transform: translateX(-300px); |
| transform: translateX(-300px); |
| } |
| |
| .reveal .slide-menu--left.active { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| .reveal .slide-menu--right { |
| right: 0; |
| -webkit-transform: translateX(300px); |
| -ms-transform: translateX(300px); |
| transform: translateX(300px); |
| } |
| |
| .reveal .slide-menu--right.active { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| .reveal { |
| transition: transform 0.3s; |
| } |
| |
| |
| /* |
| * Toolbar |
| */ |
| .reveal .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; |
| } |
| |
| .reveal .slide-menu-toolbar > li { |
| display: table-cell; |
| line-height: 150%; |
| text-align: center; |
| vertical-align: middle; |
| cursor: pointer; |
| color: #aaa; |
| border-radius: 3px; |
| } |
| |
| .reveal .slide-menu-toolbar > li.active-toolbar-button { |
| color: white; |
| text-shadow: 0 1px black; |
| } |
| |
| .slide-menu-toolbar > li:hover { |
| color: white; |
| } |
| |
| /* |
| * Panels |
| */ |
| .reveal .slide-menu-panel { |
| position: absolute; |
| width: 100%; |
| visibility: hidden; |
| height: calc(100% - 60px); |
| overflow-x: hidden; |
| overflow-y: auto; |
| color: #AAA; |
| } |
| |
| .reveal .slide-menu-panel.active-menu-panel { |
| visibility: visible; |
| } |
| |
| .reveal .slide-menu-panel h1, |
| .reveal .slide-menu-panel h2, |
| .reveal .slide-menu-panel h3, |
| .reveal .slide-menu-panel h4, |
| .reveal .slide-menu-panel h5, |
| .reveal .slide-menu-panel h6 { |
| margin: 20px 0 10px 0; |
| color: #FFF; |
| line-height: 1.2; |
| letter-spacing: normal; |
| text-shadow: none; |
| } |
| |
| .reveal .slide-menu-panel h1 { |
| font-size: 1.6em; |
| } |
| .reveal .slide-menu-panel h2 { |
| font-size: 1.4em; |
| } |
| .reveal .slide-menu-panel h3 { |
| font-size: 1.3em; |
| } |
| .reveal .slide-menu-panel h4 { |
| font-size: 1.1em; |
| } |
| .reveal .slide-menu-panel h5 { |
| font-size: 1em; |
| } |
| .reveal .slide-menu-panel h6 { |
| font-size: 0.9em; |
| } |
| |
| .reveal .slide-menu-panel p { |
| margin: 10px 0 5px 0; |
| } |
| |
| .reveal .slide-menu-panel a { |
| color: #CCC; |
| text-decoration: underline; |
| } |
| |
| .reveal .slide-menu-panel a:hover { |
| color: white; |
| } |
| |
| .reveal .slide-menu-item a { |
| text-decoration: none; |
| } |
| |
| .reveal .slide-menu-custom-panel { |
| width: calc(100% - 20px); |
| padding-left: 10px; |
| padding-right: 10px; |
| } |
| |
| .reveal .slide-menu-custom-panel .slide-menu-items { |
| width: calc(100% + 20px); |
| margin-left: -10px; |
| margin-right: 10px; |
| } |
| |
| |
| /* |
| * Theme and Transitions buttons |
| */ |
| |
| .reveal div[data-panel="Themes"] li, |
| .reveal 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 |
| */ |
| |
| .reveal .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; |
| } |
| |
| .reveal .slide-menu-overlay.active { |
| width: 100%; |
| height: 100%; |
| opacity: 0.7; |
| transition: opacity 0.3s; |
| } |