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  * FONT-FACE DEFINITIONS
  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
  25 /*********************************************
  26  * GLOBAL STYLES
  27  *********************************************/
  28
  29 body {
  30         font-family: 'Lato', Times, 'Times New Roman', serif;
  31         font-size: 36px;
  32         font-weight: 200;
  33         letter-spacing: -0.02em;
  34         color: #333;
  35
  36         background: #f7f3de;
  37         background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
  38         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)));
  39         background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  40         background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  41         background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  42         background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  43 }
  44
  45 ::-moz-selection {
  46     background:rgba(79, 64, 28, 0.99);
  47         color: white;
  48 }
  49 ::-webkit-selection {
  50     background:rgba(79, 64, 28, 0.99);
  51         color: white;
  52 }
  53 ::selection {
  54     background:rgba(79, 64, 28, 0.99);
  55         color: white;
  56 }
  57
  58
  59 /*********************************************
  60  * HEADERS
  61  *********************************************/
  62
  63 .reveal h1,
  64 .reveal h2,
  65 .reveal h3,
  66 .reveal h4,
  67 .reveal h5,
  68 .reveal h6 {
  69         margin: 0 0 20px 0;
  70         color: #333;
  71         font-family: 'League Gothic', Impact, sans-serif;
  72         line-height: 0.9em;
  73         letter-spacing: 0.02em;
  74
  75         text-transform: uppercase;
  76 }
  77
  78 .reveal h1 {
  79         text-shadow:    0 1px 0 #ccc,
  80                                         0 2px 0 #c9c9c9,
  81                                         0 3px 0 #bbb,
  82                                         0 4px 0 #b9b9b9,
  83                                         0 5px 0 #aaa,
  84                                         0 6px 1px rgba(0,0,0,.1),
  85                                         0 0 5px rgba(0,0,0,.1),
  86                                         0 1px 3px rgba(0,0,0,.3),
  87                                         0 3px 5px rgba(0,0,0,.2),
  88                                         0 5px 10px rgba(0,0,0,.25),
  89                                         0 20px 20px rgba(0,0,0,.15);
  90 }
  91
  92
  93 /*********************************************
  94  * LINKS
  95  *********************************************/
  96
  97 .reveal a:not(.image) {
  98         color: #8b743d;
  99         text-decoration: none;
 100
 101         -webkit-transition: color .15s ease;
 102            -moz-transition: color .15s ease;
 103             -ms-transition: color .15s ease;
 104              -o-transition: color .15s ease;
 105                 transition: color .15s ease;
 106 }
 107         .reveal a:not(.image):hover {
 108                 text-shadow: none;
 109                 border: none;
 110                 border-radius: 2px;
 111         }
 112
 113 .reveal .roll span:after {
 114         color: #fff;
 115         background: #8b743d;
 116 }
 117
 118
 119 /*********************************************
 120  * IMAGES
 121  *********************************************/
 122
 123 .reveal section img {
 124         margin: 30px 0 0 0;
 125         background: rgba(255,255,255,0.12);
 126         border: 4px solid #eee;
 127
 128         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 129            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 130                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 131
 132         -webkit-transition: all .2s linear;
 133            -moz-transition: all .2s linear;
 134             -ms-transition: all .2s linear;
 135              -o-transition: all .2s linear;
 136                 transition: all .2s linear;
 137 }
 138
 139         .reveal a:hover img {
 140                 background: rgba(255,255,255,0.2);
 141                 border-color: #8b743d;
 142
 143                 -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 144                    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 145                         box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 146         }
 147
 148
 149 /*********************************************
 150  * NAVIGATION CONTROLS
 151  *********************************************/
 152
 153 .reveal .controls a {
 154         color: #fff;
 155 }
 156         .reveal .controls a.enabled {
 157                 color: #8b743d;
 158                 text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
 159         }
 160
 161
 162 /*********************************************
 163  * PROGRESS BAR
 164  *********************************************/
 165
 166 .reveal .progress {
 167         background: rgba(0,0,0,0.2);
 168 }
 169         .reveal .progress span {
 170                 background: #8b743d;
 171
 172                 -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 173                    -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 174                     -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 175                      -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 176                         transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 177         }
 178
 179