.menubar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: -webkit-transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); color: inherit; z-index: 2; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; font-size: clamp(16px, var(--r-main-font-size) * var(--simplemenu-scale, 0.75), 80px); line-height: 1; } .menubar * { -webkit-box-sizing: border-box; box-sizing: border-box; } html:not(.print-pdf) body:not(.hide-menubar) .reveal.ready:not(.hide-menubar) .menubar { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } body.hide-menubar .reveal.ready .menubar a { -webkit-transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); } .menubar.bottom { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .menubar:before, .menubar:after { content: ""; position: absolute; left: 0; right: 0; border-bottom: 1px solid currentColor; opacity: 0.3; } .menubar:before { top: 0; } .menubar:after { bottom: 0; } .menubar:before { opacity: 0; } .menubar.bottom:after { opacity: 0; } .menubar.bottom:before { opacity: 0.3; } .print-pdf .pdf-page:not(.hide-menubar) .menubar { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .menubar a { -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; padding: 0.4em 0; } .menubar > ul { -webkit-transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style-type: none; padding: 0; margin: 0 auto; gap: 1.5em; } .menubar > ul li { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } .menubar > ul li:before { display: none; } .menubar > ul li + li { margin: 0; } .menubar > ul a { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.33; padding: 0.5em; color: currentColor; } .menubar > ul a:hover { color: currentColor; opacity: 0.75; } .menubar > ul li a.active, .menubar > ul li.active a { opacity: 1; } .hide-menu .menu, .hide-menu .menu, [data-state=hide-menu] .menu { opacity: 0; } .reveal .slide-number, .menubar .slide-number { background: none; font-family: inherit; color: inherit; } .reveal .slide-number a, .menubar .slide-number a { padding: 0; opacity: 0.33; color: currentColor; } .reveal .slide-number a:hover, .menubar .slide-number a:hover { color: currentColor; opacity: 0.75; } .menubar .slide-number { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-items: center; font-size: 0.75em; height: 100%; right: 0; bottom: auto; z-index: 0; padding: 0; padding-right: 1em; } .slides ~ .menubar, .menubar.bottom { top: auto; bottom: 0; } .slides ~ .menubar ~ .controls { margin-bottom: clamp(16px, 2.5 * var(--r-main-font-size) * var(--simplemenu-scale, 0.75), 100px); }