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 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: calc(100% - 90px);
 105   overflow: auto;
 106
 107   transition-property: transform, opacity;
 108   transition-duration: 3s;
 109   transition-timing-function: ease;
 110   transform-origin: center 5em;
 111
 112   opacity: 0;
 113 /*
 114   transform: translate(-100%, 0);
 115 */
 116 /*
 117   transform: scale(0.1) rotate(360deg);
 118 */
 119   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 120 }
 121
 122 article[aria-selected="true"] {
 123   opacity: 1;
 124   transform: scale(1) rotate(0deg) translate(0, 0);
 125 }
 126
 127 article[aria-selected="true"] ~ article {
 128   opacity: 0;
 129 /*
 130   transform: translate(100%, 0);
 131 */
 132 /*
 133   transform: scale(0.1) rotate(-360deg);
 134 */
 135   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 136 }
 137
 138 /***** headers *****/
 139
 140 h1 {
 141   margin: 0 0 0.5em 0;
 142   font-size: 1.7em;
 143   font-weight: bold;
 144   color: #505050;
 145   text-align: center;
 146   text-shadow: #AAAA80 3px 3px 5px;
 147 }
 148
 149 h2 {
 150   margin: 0.5em 0;
 151   font-size: 1.3em;
 152   font-weight: bold;
 153   color: #505050;
 154   text-align: center;
 155   text-shadow: #AAAA80 2px 2px 3px;
 156 }
 157
 158 h3 {
 159   margin: 0.5em 0;
 160   font-size: 1.1em;
 161   font-weight: bold;
 162   color: #505050;
 163   text-align: center;
 164 }
 165
 166 h4 {
 167   margin: 0.5em 0;
 168   font-size: 1em;
 169   font-weight: bold;
 170   color: #505050;
 171   text-align: left;
 172 }
 173
 174 /***** boxes *****/
 175
 176 .simplebox {
 177   padding: 0.5em;
 178 }
 179
 180 .captionedbox {
 181   padding: 0px;
 182 }
 183
 184 .simplebox,
 185 .captionedbox {
 186   margin: 1em;
 187   border: 1px solid #A0C8DA;
 188   background: white url("template/page-background.png") top left repeat-x;
 189   border-radius: .5em;
 190   box-shadow: #6d7581 1px 1px 3px 2px;
 191 }
 192
 193 .captionedbox-content {
 194   margin: 0px;
 195   padding: 0.5em;
 196   border: 0px;
 197   border-top: 2px solid #A0C8DA;
 198   -moz-border-top-colors: #A0C8DA #6d7581;
 199   border-radius: 0 0 .5em .5em;
 200 }
 201
 202 .captionedbox-caption {
 203   margin: 0.5em;
 204   font-weight: bold;
 205   text-shadow: #AAAA80 1px 1px 2px;
 206 }
 207
 208 /***** misc formatting *****/
 209
 210 mark {
 211   font-weight: bold;
 212   color: #FF6600;
 213   background-color: transparent;
 214   text-shadow: #AAAA80 2px 2px 3px;
 215 }
 216
 217 .border {
 218   border: 1px solid #6d7581;
 219   padding: 0.5em;
 220 }
 221
 222 ul > li {
 223   margin: 0.5em 0;
 224 }
 225
 226 .cent {
 227   text-align: center;
 228 }
 229
 230 .topmargin {
 231   margin-top: 0.5em;
 232 }
 233
 234 .akey {
 235   text-decoration: underline;
 236 }
 237
 238 a:link, a:visited { color: #447bc4; text-decoration: none; }
 239 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 240
 241 mark a:link, mark a:visited { color: #FF6600; }
 242 mark a:hover, mark a:active { color: #FF6600; }
 243
 244 /***** small stuff *****/
 245
 246 .small,
 247 .small {
 248   font-size: 0.75em;
 249 }
 250
 251 ul.small,
 252 .small ul {
 253   padding: 0px;
 254   border: 0px;
 255   margin: 0px 0px 0px 1em;
 256 }
 257
 258 ul.small > li
 259 .small ul > li {
 260   margin: 0px;
 261   padding: 0px;
 262   border: 0px;
 263 }
 264
 265 /***** specific slides *****/
 266