css/theme/beige.css

   1 /**
   2  * A beige theme for reveal.js presentations, similar
   3  * to the default theme.
   4  *
   5  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
   6  */
   7
   8 /*********************************************
   9  * FONTS
  10  *********************************************/
  11
  12 @font-face {
  13         font-family: 'League Gothic';
  14         src: url('../../lib/font/league_gothic-webfont.eot');
  15         src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
  16                  url('../../lib/font/league_gothic-webfont.woff') format('woff'),
  17                  url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
  18                  url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
  19
  20         font-weight: normal;
  21         font-style: normal;
  22 }
  23
  24 .reveal {
  25         font-family: 'Lato', Times, 'Times New Roman', serif;
  26         font-size: 36px;
  27         font-weight: 200;
  28         letter-spacing: -0.02em;
  29 }
  30
  31 .reveal h1,
  32 .reveal h2,
  33 .reveal h3,
  34 .reveal h4,
  35 .reveal h5,
  36 .reveal h6 {
  37         font-family: 'League Gothic', Impact, sans-serif;
  38         line-height: 0.9em;
  39         letter-spacing: 0.02em;
  40
  41         text-transform: uppercase;
  42 }
  43
  44
  45 /*********************************************
  46  * GLOBAL STYLES
  47  *********************************************/
  48
  49 body {
  50         color: #333;
  51
  52         background: #f7f3de;
  53         background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
  54         background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
  55         background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  56         background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  57         background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  58         background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  59 }
  60
  61 ::-moz-selection {
  62         background:rgba(79, 64, 28, 0.99);
  63         color: white;
  64 }
  65 ::-webkit-selection {
  66         background:rgba(79, 64, 28, 0.99);
  67         color: white;
  68 }
  69 ::selection {
  70         background:rgba(79, 64, 28, 0.99);
  71         color: white;
  72 }
  73
  74
  75 /*********************************************
  76  * HEADERS
  77  *********************************************/
  78
  79 .reveal h1,
  80 .reveal h2,
  81 .reveal h3,
  82 .reveal h4,
  83 .reveal h5,
  84 .reveal h6 {
  85         margin: 0 0 20px 0;
  86         color: #333;
  87 }
  88
  89 .reveal h1 {
  90         text-shadow:    0 1px 0 #ccc,
  91                                         0 2px 0 #c9c9c9,
  92                                         0 3px 0 #bbb,
  93                                         0 4px 0 #b9b9b9,
  94                                         0 5px 0 #aaa,
  95                                         0 6px 1px rgba(0,0,0,.1),
  96                                         0 0 5px rgba(0,0,0,.1),
  97                                         0 1px 3px rgba(0,0,0,.3),
  98                                         0 3px 5px rgba(0,0,0,.2),
  99                                         0 5px 10px rgba(0,0,0,.25),
 100                                         0 20px 20px rgba(0,0,0,.15);
 101 }
 102
 103
 104 /*********************************************
 105  * LINKS
 106  *********************************************/
 107
 108 .reveal a:not(.image) {
 109         color: #8b743d;
 110         text-decoration: none;
 111
 112         -webkit-transition: color .15s ease;
 113            -moz-transition: color .15s ease;
 114             -ms-transition: color .15s ease;
 115              -o-transition: color .15s ease;
 116                 transition: color .15s ease;
 117 }
 118         .reveal a:not(.image):hover {
 119                 text-shadow: none;
 120                 border: none;
 121                 border-radius: 2px;
 122         }
 123
 124 .reveal .roll span:after {
 125         color: #fff;
 126         background: #8b743d;
 127 }
 128
 129
 130 /*********************************************
 131  * IMAGES
 132  *********************************************/
 133
 134 .reveal section img {
 135         margin: 30px 0 0 0;
 136         background: rgba(255,255,255,0.12);
 137         border: 4px solid #eee;
 138
 139         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 140            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 141                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 142
 143         -webkit-transition: all .2s linear;
 144            -moz-transition: all .2s linear;
 145             -ms-transition: all .2s linear;
 146              -o-transition: all .2s linear;
 147                 transition: all .2s linear;
 148 }
 149
 150         .reveal a:hover img {
 151                 background: rgba(255,255,255,0.2);
 152                 border-color: #8b743d;
 153
 154                 -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 155                    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 156                         box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 157         }
 158
 159
 160 /*********************************************
 161  * NAVIGATION CONTROLS
 162  *********************************************/
 163
 164 .reveal .controls a {
 165         color: #fff;
 166 }
 167         .reveal .controls a.enabled {
 168                 color: #8b743d;
 169                 text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
 170         }
 171
 172
 173 /*********************************************
 174  * PROGRESS BAR
 175  *********************************************/
 176
 177 .reveal .progress {
 178         background: rgba(0,0,0,0.2);
 179 }
 180         .reveal .progress span {
 181                 background: #8b743d;
 182
 183                 -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 184                    -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 185                     -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 186                      -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 187                         transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 188         }
 189
 190