fosdem2012/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 html {
  12   overflow: hidden; /* to make translations not paint scrollbars */
  13 }
  14
  15 body {
  16   margin: 0px;
  17   padding: 0px;
  18   border: 0px;
  19   font-family: Arial,Helvetica,sans-serif;
  20   font-size: 2em;
  21   color: #6d7581;
  22   background: white url("template/page-background.png") top left repeat-x;
  23 }
  24
  25 ul {
  26   padding-left: 1.2em;
  27   margin-bottom: 0.5em;
  28 }
  29
  30 ul:first-child,
  31 ul:last-child {
  32   margin-top: 0;
  33 }
  34
  35 #header {
  36   height: 38px;
  37   position: relative;
  38   padding: 0 15px 0 0;
  39   z-index: 1;
  40 }
  41
  42 #headerlogo {
  43   position: relative;
  44   display: block;
  45   text-indent: -500px;
  46   font-size: 1px;
  47   overflow: hidden;
  48   height: 48px;
  49   width: 186px;
  50   background: url("template/firefox-title.png") 5px 3px no-repeat;
  51 }
  52
  53 #header-text {
  54   float: right;
  55   padding: 7px 20px;
  56   font-size: 24px;
  57   font-weight: bold;
  58   color: #C0C8CA;
  59 }
  60
  61 #header-text.neartime {
  62   color: #A0C8DA;
  63 }
  64
  65 #header-text.ontime {
  66   color: #80CC80;
  67 }
  68
  69 #header-text.overtime {
  70   color: #FF8080;
  71 }
  72
  73 #slidenav {
  74   padding: 4px 15px 30px 55px;
  75   font-size: 10px;
  76   color: #A0C8DA;
  77 }
  78
  79 #slidenav a:link,
  80 #slidenav a:visited {
  81   color: #6d7581;
  82 }
  83
  84 #slidenav a:hover,
  85 #slidenav a:active {
  86   color: #0000FF;
  87 }
  88
  89 #slidenav .nolink {
  90   color: #A0C8DA;
  91 }
  92
  93 #subheader-text {
  94   float: right;
  95   padding: 0 20px;
  96   color: #6d7581;
  97 }
  98
  99 article {
 100   position: absolute;
 101   width: 100%;
 102   /* header is 38px + 1px border, slidenav is 13px + 4px + 30px paddings,
 103      another 5px for safety */
 104   height: -moz-calc(100% - 90px);
 105   overflow: auto;
 106
 107   -moz-transition-property: -moz-transform, opacity;
 108   -moz-transition-duration: 3s;
 109   -moz-transition-timing-function: ease;
 110   -webkit-transition-property: -moz-transform, opacity;
 111   -webkit-transition-duration: 3s;
 112   -webkit-transition-timing-function: ease;
 113   -moz-transform-origin: center 5em;
 114
 115   opacity: 0;
 116 /*
 117   -moz-transform: translate(-100%, 0);
 118   -webkit-transform: translate(-100%, 0);
 119 */
 120 /*
 121   -moz-transform: scale(0.1) rotate(360deg);
 122   -webkit-transform: scale(0.1) rotate(360deg);
 123 */
 124   -moz-transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 125   -webkit-transform: scale(0.1) rotate(360deg) translate(-100%, 0);
 126 }
 127
 128 article[aria-selected="true"] {
 129   opacity: 1;
 130   -moz-transform: scale(1) rotate(0deg) translate(0, 0);
 131   -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
 132 }
 133
 134 article[aria-selected="true"] ~ article {
 135   opacity: 0;
 136 /*
 137   -moz-transform: translate(100%, 0);
 138   -webkit-transform: translate(100%, 0);
 139 */
 140 /*
 141   -moz-transform: scale(0.1) rotate(-360deg);
 142   -webkit-transform: scale(0.1) rotate(-360deg);
 143 */
 144   -moz-transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 145   -webkit-transform: scale(0.1) rotate(-360deg) translate(100%, 0);
 146 }
 147
 148 /***** headers *****/
 149
 150 h1 {
 151   margin: 0 0 0.5em 0;
 152   font-size: 1.7em;
 153   font-weight: bold;
 154   color: #505050;
 155   text-align: center;
 156   text-shadow: #AAAA80 3px 3px 5px;
 157 }
 158
 159 h2 {
 160   margin: 0.5em 0;
 161   font-size: 1.3em;
 162   font-weight: bold;
 163   color: #505050;
 164   text-align: center;
 165   text-shadow: #AAAA80 2px 2px 3px;
 166 }
 167
 168 h3 {
 169   margin: 0.5em 0;
 170   font-size: 1.1em;
 171   font-weight: bold;
 172   color: #505050;
 173   text-align: center;
 174 }
 175
 176 h4 {
 177   margin: 0.5em 0;
 178   font-size: 1em;
 179   font-weight: bold;
 180   color: #505050;
 181   text-align: left;
 182 }
 183
 184 /***** boxes *****/
 185
 186 .simplebox {
 187   padding: 0.5em;
 188 }
 189
 190 .captionedbox {
 191   padding: 0px;
 192 }
 193
 194 .simplebox,
 195 .captionedbox {
 196   margin: 1em;
 197   border: 1px solid #A0C8DA;
 198   background: white url("template/page-background.png") top left repeat-x;
 199   -moz-border-radius: .5em;
 200   -moz-box-shadow: #6d7581 1px 1px 3px 2px;
 201 }
 202
 203 .captionedbox-content {
 204   margin: 0px;
 205   padding: 0.5em;
 206   border: 0px;
 207   border-top: 2px solid #A0C8DA;
 208   -moz-border-top-colors: #A0C8DA #6d7581;
 209   -moz-border-radius: 0 0 .5em .5em;
 210 }
 211
 212 .captionedbox-caption {
 213   margin: 0.5em;
 214   font-weight: bold;
 215   text-shadow: #AAAA80 1px 1px 2px;
 216 }
 217
 218 /***** misc formatting *****/
 219
 220 mark {
 221   font-weight: bold;
 222   color: #FF6600;
 223   background-color: transparent;
 224   text-shadow: #AAAA80 2px 2px 3px;
 225 }
 226
 227 .border {
 228   border: 1px solid #6d7581;
 229   padding: 0.5em;
 230 }
 231
 232 ul > li {
 233   margin: 0.5em 0;
 234 }
 235
 236 .cent {
 237   text-align: center;
 238 }
 239
 240 .topmargin {
 241   margin-top: 0.5em;
 242 }
 243
 244 .akey {
 245   text-decoration: underline;
 246 }
 247
 248 a:link, a:visited { color: #447bc4; text-decoration: none; }
 249 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 250
 251 mark a:link, mark a:visited { color: #FF6600; }
 252 mark a:hover, mark a:active { color: #FF6600; }
 253
 254 /***** small stuff *****/
 255
 256 .small,
 257 .small {
 258   font-size: 0.75em;
 259 }
 260
 261 ul.small,
 262 .small ul {
 263   padding: 0px;
 264   border: 0px;
 265   margin: 0px 0px 0px 1em;
 266 }
 267
 268 ul.small > li
 269 .small ul > li {
 270   margin: 0px;
 271   padding: 0px;
 272   border: 0px;
 273 }
 274
 275 /***** specific slides *****/
 276