fosdem2013/slides.css

   1 /**************************
   2  * styles for talk slides *
   3  *    by Robert Kaiser    *
   4  *    <kairo@kairo.at>    *
   5  * (for Linuxwochen 2009) *
   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 38px + 1px border, slidenav is 13px + 4px + 30px paddings,
 132      another 5px for safety */
 133   height: calc(100% - 90px);
 134   overflow: auto;
 135
 136   transition-property: transform, opacity;
 137   transition-duration: 3s;
 138   transition-timing-function: ease;
 139   transform-origin: center 5em;
 140
 141   opacity: 0;
 142 /*
 143   transform: translate(-100%, 0);
 144 */
 145 /*
 146   transform: scale(0.1) rotate(360deg);
 147 */
 148   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 149 }
 150
 151 article[aria-selected="true"] {
 152   opacity: 1;
 153   transform: scale(1) rotate(0deg) translate(0, 0);
 154 }
 155
 156 article[aria-selected="true"] ~ article {
 157   opacity: 0;
 158 /*
 159   transform: translate(100%, 0);
 160 */
 161 /*
 162   transform: scale(0.1) rotate(-360deg);
 163 */
 164   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 165 }
 166
 167 /***** headers *****/
 168
 169 h1, h2, h3, h4 {
 170   margin: 0.5em 0;
 171   font-weight: bold;
 172   color: #484848;
 173   text-align: center;
 174 }
 175
 176 h1 {
 177   margin-top: 0;
 178   font-size: 1.7em;
 179   text-shadow: #AAAA80 3px 3px 5px;
 180 }
 181
 182 h2 {
 183   font-size: 1.3em;
 184   text-shadow: #AAAA80 2px 2px 3px;
 185 }
 186
 187 h3 {
 188   font-size: 1.1em;
 189 }
 190
 191 h4 {
 192   font-size: 1em;
 193   text-align: left;
 194 }
 195
 196 /***** boxes *****/
 197
 198 .simplebox {
 199   padding: 0.5em;
 200 }
 201
 202 .captionedbox {
 203   padding: 0px;
 204 }
 205
 206 .simplebox,
 207 .captionedbox {
 208   margin: 1em;
 209   box-shadow: 0 0 0 1px #fff inset;
 210   background: #fff;
 211   background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
 212   border-bottom: 1px solid #ddd;
 213 }
 214
 215 .captionedbox-content {
 216   margin: 0px;
 217   padding: 0.5em;
 218   border: 0px;
 219   border-top: 1px solid #d6d6d6;
 220 }
 221
 222 .captionedbox-caption {
 223   margin: 0.5em;
 224   font-weight: bold;
 225   text-shadow: #AAAA80 1px 1px 2px;
 226 }
 227
 228 /***** misc formatting *****/
 229
 230 mark {
 231   font-weight: bold;
 232   color: #FF6600;
 233   background-color: transparent;
 234   text-shadow: #AAAA80 2px 2px 3px;
 235 }
 236
 237 .border {
 238   border: 1px solid #6d7581;
 239   padding: 0.5em;
 240 }
 241
 242 .sshot {
 243   box-shadow: #6d7581 1px 1px 3px 2px;
 244 }
 245
 246 ul > li {
 247   margin: 0.5em 0;
 248 }
 249
 250 .cent {
 251   text-align: center;
 252 }
 253
 254 .topmargin {
 255   margin-top: 0.5em;
 256 }
 257
 258 .akey {
 259   text-decoration: underline;
 260 }
 261
 262 a:link, a:visited { color: #0096dd; text-decoration: none; }
 263 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 264
 265 mark a:link, mark a:visited { color: #FF6600; }
 266 mark a:hover, mark a:active { color: #FF6600; }
 267
 268 /***** small stuff *****/
 269
 270 .small,
 271 .small {
 272   font-size: 0.75em;
 273 }
 274
 275 ul.small,
 276 .small ul {
 277   padding: 0px;
 278   border: 0px;
 279   margin: 0px 0px 0px 1em;
 280 }
 281
 282 ul.small > li
 283 .small ul > li {
 284   margin: 0px;
 285   padding: 0px;
 286   border: 0px;
 287 }
 288
 289 /***** specific slides *****/
 290