linuxwochen2013-mozilla/slides.css

   1 /**************************
   2  * styles for talk slides *
   3  *    by Robert Kaiser    *
   4  *    <kairo@kairo.at>    *
   5  *   (for FOSDEM 2013)    *
   6  **************************/
   7
   8
   9 /***** base style *****/
  10
  11 @font-face {
  12   font-family: 'Open Sans';
  13   src: url('template/OpenSans-Regular-webfont.woff');
  14   font-weight: normal;
  15   font-style: normal;
  16 }
  17
  18 @font-face {
  19   font-family: 'Open Sans';
  20   src: url('template/OpenSans-Semibold-webfont.woff');
  21   font-weight: bold;
  22   font-style: normal;
  23 }
  24
  25 @font-face {
  26   font-family: 'Open Sans';
  27   src: url('template/OpenSans-Italic-webfont.woff');
  28   font-weight: normal;
  29   font-style: italic;
  30 }
  31
  32 html {
  33   overflow: hidden; /* to make translations not paint scrollbars */
  34   background: #f5f1e8 url("template/page-background.png") top left repeat;
  35   height: 100%;
  36 }
  37
  38 body {
  39   margin: 0px;
  40   padding: 0px;
  41   border: 0px;
  42   font-family: "Open Sans", sans-serif;
  43   font-size: 2em;
  44   color: #333333;
  45   background: url("template/page-background-top.png") top left repeat-x;
  46   height: 100%;
  47 }
  48
  49 ul {
  50   padding-left: 1.2em;
  51   margin-bottom: 0.5em;
  52 }
  53
  54 ul:first-child,
  55 ul:last-child {
  56   margin-top: 0;
  57 }
  58
  59 #header {
  60   height: 40px;
  61   position: relative;
  62   border-top: 1px solid white;
  63 }
  64
  65 #headerlogo {
  66   position: absolute;
  67   display: block;
  68   right: 20px;
  69   top: 0;
  70   text-indent: -2000px;
  71   font-size: 1px;
  72   overflow: hidden;
  73   height: 41px;
  74   width: 148px;
  75   background: url("template/mozilla-tab.png") no-repeat;
  76 }
  77
  78 #header-text {
  79   position: relative;
  80   top: 5px;
  81   left: 25px;
  82   font-size: 20px;
  83   font-weight: bold;
  84   color: #808080;
  85 }
  86
  87 #header-text.neartime {
  88   color: #80AACC;
  89 }
  90
  91 #header-text.ontime {
  92   color: #80CC80;
  93 }
  94
  95 #header-text.overtime {
  96   color: #FF8080;
  97 }
  98
  99 #subheader-text {
 100   color: #808080;
 101   position: relative;
 102   top: 3px;
 103   left: 25px;
 104   font-size: 10px;
 105 }
 106
 107 #slidenav {
 108   position: absolute;
 109   right: 200px;
 110   top: 15px;
 111   font-size: 10px;
 112 }
 113
 114 #slidenav a:link,
 115 #slidenav a:visited {
 116   color: #484848;
 117 }
 118
 119 #slidenav a:hover,
 120 #slidenav a:active {
 121   color: #0073aa;
 122 }
 123
 124 #slidenav .nolink {
 125   color: #A0A0A0;
 126 }
 127
 128 article {
 129   position: absolute;
 130   width: 100%;
 131   /* header is 40px, 7px to have a bit of distance,
 132    * 3px height-reducing on the bottom for safety */
 133   top: 47px;
 134   height: calc(100% - 50px);
 135   overflow: auto;
 136
 137   transition-property: transform, opacity;
 138   transition-duration: 3s;
 139   transition-timing-function: ease;
 140   transform-origin: center 5em;
 141
 142   opacity: 0;
 143 /*
 144   transform: translate(-100%, 0);
 145 */
 146 /*
 147   transform: scale(0.1) rotate(360deg);
 148 */
 149   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 150 }
 151
 152 article[aria-selected="true"] {
 153   opacity: 1;
 154   transform: scale(1) rotate(0deg) translate(0, 0);
 155 }
 156
 157 article[aria-selected="true"] ~ article {
 158   opacity: 0;
 159 /*
 160   transform: translate(100%, 0);
 161 */
 162 /*
 163   transform: scale(0.1) rotate(-360deg);
 164 */
 165   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 166 }
 167
 168 /***** headers *****/
 169
 170 h1, h2, h3, h4 {
 171   margin: 0.5em 0;
 172   font-weight: bold;
 173   color: #484848;
 174   text-align: center;
 175 }
 176
 177 h1 {
 178   margin-top: 0;
 179   font-size: 1.7em;
 180   text-shadow: #AAAA80 3px 3px 5px;
 181 }
 182
 183 h2 {
 184   font-size: 1.3em;
 185   text-shadow: #AAAA80 2px 2px 3px;
 186 }
 187
 188 h3 {
 189   font-size: 1.1em;
 190 }
 191
 192 h4 {
 193   font-size: 1em;
 194   text-align: left;
 195 }
 196
 197 /***** boxes *****/
 198
 199 .simplebox {
 200   padding: 0.5em;
 201 }
 202
 203 .captionedbox {
 204   padding: 0px;
 205 }
 206
 207 .simplebox,
 208 .captionedbox {
 209   margin: 1em;
 210   box-shadow: 0 0 0 1px #fff inset;
 211   background: #fff;
 212   background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
 213   border-bottom: 1px solid #ddd;
 214 }
 215
 216 .captionedbox-content {
 217   margin: 0;
 218   padding: 0.5em;
 219   border: 0px;
 220   border-top: 1px solid #d6d6d6;
 221 }
 222
 223 .captionedbox-caption {
 224   margin: 0;
 225   padding: 0.5em;
 226   font-weight: bold;
 227   text-shadow: #AAAA80 1px 1px 2px;
 228 }
 229
 230 /***** misc formatting *****/
 231
 232 mark {
 233   font-weight: bold;
 234   color: #FF6600;
 235   background-color: transparent;
 236   text-shadow: #AAAA80 2px 2px 3px;
 237 }
 238
 239 .border {
 240   border: 1px solid #6d7581;
 241   padding: 0.5em;
 242 }
 243
 244 .sshot {
 245   box-shadow: #6d7581 1px 1px 3px 2px;
 246 }
 247
 248 .slidepic {
 249   float: right;
 250   margin-left: .5em;
 251 }
 252
 253 .ensurepicinbox {
 254   clear: both;
 255   font-size: 1px;
 256   margin: 0;
 257 }
 258
 259 ul > li {
 260   margin: 0.5em 0;
 261 }
 262
 263 .cent {
 264   text-align: center;
 265 }
 266
 267 .topmargin {
 268   margin-top: 0.5em;
 269 }
 270
 271 .akey {
 272   text-decoration: underline;
 273 }
 274
 275 a:link, a:visited { color: #0096dd; text-decoration: none; }
 276 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 277
 278 mark a:link, mark a:visited { color: #FF6600; }
 279 mark a:hover, mark a:active { color: #FF6600; }
 280
 281 /***** small stuff *****/
 282
 283 .small,
 284 .small {
 285   font-size: 0.75em;
 286 }
 287
 288 ul.small,
 289 .small ul {
 290   padding: 0px;
 291   border: 0px;
 292   margin: 0px 0px 0px 1em;
 293 }
 294
 295 ul.small > li
 296 .small ul > li {
 297   margin: 0px;
 298   padding: 0px;
 299   border: 0px;
 300 }
 301
 302 /***** specific slides *****/
 303