css/theme/beige.css

   1 @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
   2 /**
   3  * Beige theme for reveal.js.
   4  *
   5  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
   6  */
   7 @font-face {
   8   font-family: 'League Gothic';
   9   src: url("../../lib/font/league_gothic-webfont.eot");
  10   src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
  11   font-weight: normal;
  12   font-style: normal; }
  13
  14 /*********************************************
  15  * GLOBAL STYLES
  16  *********************************************/
  17 body {
  18   background: #f7f2d3;
  19   background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  20   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
  21   background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  22   background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  23   background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  24   background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  25   background-color: #f7f3de; }
  26
  27 .reveal {
  28   font-family: "Lato", sans-serif;
  29   font-size: 36px;
  30   font-weight: 200;
  31   letter-spacing: -0.02em;
  32   color: #333333; }
  33
  34 ::selection {
  35   color: white;
  36   background: rgba(79, 64, 28, 0.99);
  37   text-shadow: none; }
  38
  39 /*********************************************
  40  * HEADERS
  41  *********************************************/
  42 .reveal h1,
  43 .reveal h2,
  44 .reveal h3,
  45 .reveal h4,
  46 .reveal h5,
  47 .reveal h6 {
  48   margin: 0 0 20px 0;
  49   color: #333333;
  50   font-family: "League Gothic", Impact, sans-serif;
  51   line-height: 0.9em;
  52   letter-spacing: 0.02em;
  53   text-transform: uppercase;
  54   text-shadow: none; }
  55
  56 .reveal h1 {
  57   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); }
  58
  59 /*********************************************
  60  * LINKS
  61  *********************************************/
  62 .reveal a:not(.image) {
  63   color: #8b743d;
  64   text-decoration: none;
  65   -webkit-transition: color 0.15s ease;
  66   -moz-transition: color 0.15s ease;
  67   -ms-transition: color 0.15s ease;
  68   -o-transition: color 0.15s ease;
  69   transition: color 0.15s ease; }
  70
  71 .reveal a:not(.image):hover {
  72   color: #c0a86e;
  73   text-shadow: none;
  74   border: none; }
  75
  76 .reveal .roll span:after {
  77   color: #fff;
  78   background: #564826; }
  79
  80 /*********************************************
  81  * IMAGES
  82  *********************************************/
  83 .reveal section img {
  84   margin: 15px 0px;
  85   background: rgba(255, 255, 255, 0.12);
  86   border: 4px solid #333333;
  87   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  88   -webkit-transition: all 0.2s linear;
  89   -moz-transition: all 0.2s linear;
  90   -ms-transition: all 0.2s linear;
  91   -o-transition: all 0.2s linear;
  92   transition: all 0.2s linear; }
  93
  94 .reveal a:hover img {
  95   background: rgba(255, 255, 255, 0.2);
  96   border-color: #8b743d;
  97   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
  98
  99 /*********************************************
 100  * NAVIGATION CONTROLS
 101  *********************************************/
 102 .reveal .controls div.navigate-left,
 103 .reveal .controls div.navigate-left.enabled {
 104   border-right-color: #8b743d; }
 105
 106 .reveal .controls div.navigate-right,
 107 .reveal .controls div.navigate-right.enabled {
 108   border-left-color: #8b743d; }
 109
 110 .reveal .controls div.navigate-up,
 111 .reveal .controls div.navigate-up.enabled {
 112   border-bottom-color: #8b743d; }
 113
 114 .reveal .controls div.navigate-down,
 115 .reveal .controls div.navigate-down.enabled {
 116   border-top-color: #8b743d; }
 117
 118 .reveal .controls div.navigate-left.enabled:hover {
 119   border-right-color: #c0a86e; }
 120
 121 .reveal .controls div.navigate-right.enabled:hover {
 122   border-left-color: #c0a86e; }
 123
 124 .reveal .controls div.navigate-up.enabled:hover {
 125   border-bottom-color: #c0a86e; }
 126
 127 .reveal .controls div.navigate-down.enabled:hover {
 128   border-top-color: #c0a86e; }
 129
 130 /*********************************************
 131  * PROGRESS BAR
 132  *********************************************/
 133 .reveal .progress {
 134   background: rgba(0, 0, 0, 0.2); }
 135
 136 .reveal .progress span {
 137   background: #8b743d;
 138   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 139   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 140   -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 141   -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 142   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }