simple.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /**
  2. * A simple theme for reveal.js presentations, similar
  3. * to the default theme. The accent color is darkblue;
  4. * do a find-replace to change it.
  5. *
  6. * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  7. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of.
  8. */
  9. /*********************************************
  10. * FONTS
  11. *********************************************/
  12. @import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
  13. .reveal {
  14. font-family: 'Lato', Times, 'Times New Roman', serif;
  15. font-size: 36px;
  16. font-weight: 200;
  17. letter-spacing: -0.02em;
  18. }
  19. .reveal h1,
  20. .reveal h2,
  21. .reveal h3,
  22. .reveal h4,
  23. .reveal h5,
  24. .reveal h6 {
  25. margin: 0 0 20px 0;
  26. color: black;
  27. font-family: 'News Cycle', Impact, sans-serif;
  28. line-height: 0.9em;
  29. text-transform: uppercase;
  30. }
  31. /*********************************************
  32. * GLOBAL STYLES
  33. *********************************************/
  34. body {
  35. color: black !important;
  36. background: white;
  37. }
  38. ::-moz-selection {
  39. background:rgba(0, 0, 0, 0.99);
  40. color: white;
  41. }
  42. ::-webkit-selection {
  43. background:rgba(0, 0, 0, 0.99);
  44. color: white;
  45. }
  46. ::selection {
  47. background:rgba(0, 0, 0, 0.99);
  48. color: white;
  49. }
  50. /*********************************************
  51. * HEADERS
  52. *********************************************/
  53. .reveal h1,
  54. .reveal h2,
  55. .reveal h3,
  56. .reveal h4,
  57. .reveal h5,
  58. .reveal h6 {
  59. margin: 0 0 20px 0;
  60. color: black;
  61. }
  62. /*********************************************
  63. * LINKS
  64. *********************************************/
  65. .reveal a:not(.image) {
  66. color: darkblue;
  67. text-decoration: none;
  68. -webkit-transition: color .15s ease;
  69. -moz-transition: color .15s ease;
  70. -ms-transition: color .15s ease;
  71. -o-transition: color .15s ease;
  72. transition: color .15s ease;
  73. }
  74. .reveal a:not(.image):hover {
  75. text-shadow: none;
  76. border: none;
  77. border-radius: 2px;
  78. }
  79. .reveal .roll span:after {
  80. color: #fff;
  81. background: darkblue;
  82. }
  83. /*********************************************
  84. * IMAGES
  85. *********************************************/
  86. .reveal section img {
  87. margin: 30px 0 0 0;
  88. background: rgba(255,255,255,0.12);
  89. border: 4px solid #eee;
  90. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  91. -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  92. box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  93. -webkit-transition: all .2s linear;
  94. -moz-transition: all .2s linear;
  95. -ms-transition: all .2s linear;
  96. -o-transition: all .2s linear;
  97. transition: all .2s linear;
  98. }
  99. .reveal a:hover img {
  100. background: rgba(255,255,255,0.2);
  101. border-color: darkblue;
  102. -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  103. -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  104. box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  105. }
  106. /*********************************************
  107. * NAVIGATION CONTROLS
  108. *********************************************/
  109. .reveal .controls a {
  110. color: black;
  111. }
  112. .reveal .controls a.enabled {
  113. color: darkblue;
  114. opacity: 1;
  115. text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
  116. }
  117. /*********************************************
  118. * PROGRESS BAR
  119. *********************************************/
  120. .reveal .progress {
  121. background: rgba(0,0,0,0.2);
  122. }
  123. .reveal .progress span {
  124. background: darkblue;
  125. -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  126. -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  127. -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  128. -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  129. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  130. }