title-footer.css 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*************************************************
  2. * *
  3. * CSS for the Title-Footer plugin for Reveal.js *
  4. * *
  5. * Author: Igor Leturia *
  6. * *
  7. * License: GPL v3 *
  8. * http://www.gnu.org/copyleft/gpl.html *
  9. * *
  10. *************************************************/
  11. /* Style for the Title-Footer footer */
  12. #title-footer
  13. {
  14. opacity: 1;
  15. transition: opacity 800ms ease-in-out;
  16. position: fixed;
  17. height: 2vh;
  18. z-index: 20;
  19. width: 100%;
  20. font-size: 2vh;
  21. text-align: center;
  22. letter-spacing: 0em;
  23. padding-top: 0.5vh;
  24. padding-bottom: 0.5vh;
  25. }
  26. /* Bottom position for the Title-Footer footer when both progress bar and TOC-Progress are visible */
  27. div.progress[style="display: block;"] ~ #title-footer
  28. {
  29. bottom: calc(3px + 10.5vh);
  30. }
  31. /* Bottom position for the Title-Footer footer when TOC-Progress is visible */
  32. #title-footer
  33. {
  34. bottom: 10.5vh;
  35. }
  36. /* This is to fix the positioning of the title which goes off screen due to a new reveal.js CSS property. */
  37. #title-footer p{
  38. margin: 0;
  39. }
  40. /* Bottom position for the Title-Footer footer when progress bar is visible */
  41. div.progress[style="display: block;"] ~ footer:last-of-type#title-footer
  42. {
  43. bottom: 3px;
  44. }
  45. /* Bottom position for the Title-Footer footer when neither progress bar nor TOC-Progress are visible */
  46. footer:last-of-type#title-footer
  47. {
  48. bottom: 0px;
  49. }
  50. /* Make Title-Footer invisible if explicitly indicated */
  51. .no-title-footer #title-footer
  52. {
  53. opacity: 0;
  54. transition: opacity 800ms ease-in-out;
  55. }
  56. .no-toc-progress #title-footer
  57. {
  58. opacity: 0;
  59. transition: opacity 800ms ease-in-out;
  60. }
  61. /* Make Title-Footer invisible in overview mode */
  62. .overview #title-footer
  63. {
  64. opacity: 0;
  65. transition: opacity 800ms ease-in-out;
  66. }