176 lines
		
	
	
	
		
			5.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
		
		
			
		
	
	
			176 lines
		
	
	
	
		
			5.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
|  | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); | ||
|  | /** | ||
|  |  * Blood theme for reveal.js | ||
|  |  * Author: Walther http://github.com/Walther | ||
|  |  * | ||
|  |  * Designed to be used with highlight.js theme | ||
|  |  * "monokai_sublime.css" available from | ||
|  |  * https://github.com/isagalaev/highlight.js/ | ||
|  |  * | ||
|  |  * For other themes, change $codeBackground accordingly. | ||
|  |  * | ||
|  |  */ | ||
|  | /********************************************* | ||
|  |  * GLOBAL STYLES | ||
|  |  *********************************************/ | ||
|  | body { | ||
|  |   background: #222222; | ||
|  |   background: -moz-radial-gradient(center, circle cover, #626262 0%, #222222 100%); | ||
|  |   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222222)); | ||
|  |   background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222222 100%); | ||
|  |   background: -o-radial-gradient(center, circle cover, #626262 0%, #222222 100%); | ||
|  |   background: -ms-radial-gradient(center, circle cover, #626262 0%, #222222 100%); | ||
|  |   background: radial-gradient(center, circle cover, #626262 0%, #222222 100%); | ||
|  |   background-color: #2b2b2b; } | ||
|  | 
 | ||
|  | .reveal { | ||
|  |   font-family: Ubuntu, "sans-serif"; | ||
|  |   font-size: 36px; | ||
|  |   font-weight: normal; | ||
|  |   letter-spacing: -0.02em; | ||
|  |   color: #eeeeee; } | ||
|  | 
 | ||
|  | ::selection { | ||
|  |   color: white; | ||
|  |   background: #aa2233; | ||
|  |   text-shadow: none; } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * HEADERS | ||
|  |  *********************************************/ | ||
|  | .reveal h1, | ||
|  | .reveal h2, | ||
|  | .reveal h3, | ||
|  | .reveal h4, | ||
|  | .reveal h5, | ||
|  | .reveal h6 { | ||
|  |   margin: 0 0 20px 0; | ||
|  |   color: #eeeeee; | ||
|  |   font-family: Ubuntu, "sans-serif"; | ||
|  |   line-height: 0.9em; | ||
|  |   letter-spacing: 0.02em; | ||
|  |   text-transform: uppercase; | ||
|  |   text-shadow: 2px 2px 2px #222222; } | ||
|  | 
 | ||
|  | .reveal h1 { | ||
|  |   text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * LINKS | ||
|  |  *********************************************/ | ||
|  | .reveal a:not(.image) { | ||
|  |   color: #aa2233; | ||
|  |   text-decoration: none; | ||
|  |   -webkit-transition: color .15s ease; | ||
|  |   -moz-transition: color .15s ease; | ||
|  |   -ms-transition: color .15s ease; | ||
|  |   -o-transition: color .15s ease; | ||
|  |   transition: color .15s ease; } | ||
|  | 
 | ||
|  | .reveal a:not(.image):hover { | ||
|  |   color: #dd5566; | ||
|  |   text-shadow: none; | ||
|  |   border: none; } | ||
|  | 
 | ||
|  | .reveal .roll span:after { | ||
|  |   color: #fff; | ||
|  |   background: #6a1520; } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * IMAGES | ||
|  |  *********************************************/ | ||
|  | .reveal section img { | ||
|  |   margin: 15px 0px; | ||
|  |   background: rgba(255, 255, 255, 0.12); | ||
|  |   border: 4px solid #eeeeee; | ||
|  |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); | ||
|  |   -webkit-transition: all .2s linear; | ||
|  |   -moz-transition: all .2s linear; | ||
|  |   -ms-transition: all .2s linear; | ||
|  |   -o-transition: all .2s linear; | ||
|  |   transition: all .2s linear; } | ||
|  | 
 | ||
|  | .reveal a:hover img { | ||
|  |   background: rgba(255, 255, 255, 0.2); | ||
|  |   border-color: #aa2233; | ||
|  |   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * NAVIGATION CONTROLS | ||
|  |  *********************************************/ | ||
|  | .reveal .controls div.navigate-left, | ||
|  | .reveal .controls div.navigate-left.enabled { | ||
|  |   border-right-color: #aa2233; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-right, | ||
|  | .reveal .controls div.navigate-right.enabled { | ||
|  |   border-left-color: #aa2233; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-up, | ||
|  | .reveal .controls div.navigate-up.enabled { | ||
|  |   border-bottom-color: #aa2233; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-down, | ||
|  | .reveal .controls div.navigate-down.enabled { | ||
|  |   border-top-color: #aa2233; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-left.enabled:hover { | ||
|  |   border-right-color: #dd5566; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-right.enabled:hover { | ||
|  |   border-left-color: #dd5566; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-up.enabled:hover { | ||
|  |   border-bottom-color: #dd5566; } | ||
|  | 
 | ||
|  | .reveal .controls div.navigate-down.enabled:hover { | ||
|  |   border-top-color: #dd5566; } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * PROGRESS BAR | ||
|  |  *********************************************/ | ||
|  | .reveal .progress { | ||
|  |   background: rgba(0, 0, 0, 0.2); } | ||
|  | 
 | ||
|  | .reveal .progress span { | ||
|  |   background: #aa2233; | ||
|  |   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | ||
|  |   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | ||
|  |   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | ||
|  |   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | ||
|  |   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } | ||
|  | 
 | ||
|  | /********************************************* | ||
|  |  * SLIDE NUMBER | ||
|  |  *********************************************/ | ||
|  | .reveal .slide-number { | ||
|  |   color: #aa2233; } | ||
|  | 
 | ||
|  | .reveal p { | ||
|  |   font-weight: 300; | ||
|  |   text-shadow: 1px 1px #222222; } | ||
|  | 
 | ||
|  | .reveal h1, | ||
|  | .reveal h2, | ||
|  | .reveal h3, | ||
|  | .reveal h4, | ||
|  | .reveal h5, | ||
|  | .reveal h6 { | ||
|  |   font-weight: 700; } | ||
|  | 
 | ||
|  | .reveal a:not(.image), | ||
|  | .reveal a:not(.image):hover { | ||
|  |   text-shadow: 2px 2px 2px #000; } | ||
|  | 
 | ||
|  | .reveal small a:not(.image), | ||
|  | .reveal small a:not(.image):hover { | ||
|  |   text-shadow: 1px 1px 1px #000; } | ||
|  | 
 | ||
|  | .reveal p code { | ||
|  |   background-color: #23241f; | ||
|  |   display: inline-block; | ||
|  |   border-radius: 7px; } | ||
|  | 
 | ||
|  | .reveal small code { | ||
|  |   vertical-align: baseline; } |