/documentation/css/docs.css
CSS | 417 lines | 409 code | 7 blank | 1 comment | 0 complexity | d7b2cd2e3df60b43d63842c39f46b522 MD5 | raw file
1body { 2 font-size: 14px; 3 line-height: 21px; 4 color: #333; 5 background: #f6f6f6 url(../images/background.png); 6 font-family: "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important; 7} 8.container { 9 width: 950px; 10 margin: 0; 11 padding: 80px 0px 50px 50px; 12 clear: both; 13} 14p, li { 15 width: 625px; 16} 17a { 18 color: #191933; 19} 20h1, h2, h3, h4, h5, h6, b.header { 21 font-size: 18px; 22 color: #000; 23 margin-top: 40px; 24 margin-bottom: 15px; 25 text-shadow: #fff 0 1px 1px; 26} 27br.clear { 28 height: 0; 29 clear: both; 30} 31ul { 32 padding-left: 20px; 33} 34b.header { 35 display: block; 36} 37li { 38 margin-bottom: 10px; 39} 40table { 41 margin: 16px 0 0 13px; padding: 0; 42 width: 625px; 43} 44 tr, td { 45 margin: 0; padding: 0; 46 } 47 td { 48 padding: 9px 15px 9px 0; 49 vertical-align: top; 50 } 51table.definitions { 52 width: auto; 53 margin: 30px 0; 54 border-left: 5px solid rgba(0,0,0,0.2);; 55} 56 table.definitions td { 57 text-align: center; 58 padding: 5px 20px; 59 } 60code, pre, textarea { 61 font-family: Monaco, Consolas, "Lucida Console", monospace; 62 font-size: 12px; 63 line-height: 18px; 64 color: #155; 65 white-space: pre-wrap; 66 word-wrap: break-word; 67} 68 p > code, li > code { 69 display: inline-block; 70 background: #fff; 71 border: 1px solid #dedede; 72 padding: 0px 0.2em; 73 } 74 pre { 75 border-left: 5px solid rgba(0,0,0,0.2); 76 padding: 3px 0 3px 12px; 77 font-size: 12px; 78 } 79 pre.no_bar { 80 border-left: 0; 81 margin-left: 0; 82 padding-left: 0; 83 } 84.timestamp { 85 font-size: 11px; 86 font-weight: normal; 87 text-transform: uppercase; 88} 89div.anchor { 90 position: relative; 91 top: -90px; 92 margin: 0 0 -20px; 93} 94div.code { 95 position: relative; 96 background: #fff; 97 border: 1px solid #d8d8d8; 98 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.23); 99 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.23); 100 box-shadow: 0px 0px 4px rgba(0,0,0,0.23); 101 zoom: 1; 102} 103 div.code .minibutton { 104 text-transform: none; 105 position: absolute; 106 right: 8px; bottom: 8px; 107 } 108 div.code .load { 109 left: 8px; right: auto; 110 } 111 div.code pre, div.code textarea { 112 float: left; 113 width: 450px; 114 background: #fff; 115 border: 1px dotted #d0d0d0; 116 border-top-width: 0; 117 border-bottom-width: 0; 118 border-right-width: 0; 119 margin: 0 3px 15px 3px; 120 padding: 10px 0 0 12px; 121 } 122 div.code pre:first-child { 123 border-left: 0; 124 } 125 126#fadeout { 127 z-index: 50; 128 position: fixed; 129 left: 0; top: 0; right: 0; 130 height: 100px; 131 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 255)), to(rgba(255, 255, 255, 0))); 132 background: -moz-linear-gradient(top, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0)); 133} 134 135#flybar { 136 position: fixed; 137 z-index: 100; 138 height: 50px; 139 min-width: 490px; 140 left: 40px; right: 40px; top: 25px; 141 background: #eee; 142 background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada)); 143 background: -moz-linear-gradient(top, #f8f8f8, #dadada); 144 border: 1px solid #aaa; 145 border-top: 1px solid #bbb; 146 border-bottom: 1px solid #888; 147 -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 148 -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1); 149 -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1); 150 box-shadow: 0 3px 5px rgba(0,0,0,0.1); 151} 152 #logo { 153 display: block; 154 outline: none; 155 float: left; 156 width: 242px; 157 margin-left: 10px; 158 } 159 #logo img { 160 margin: 5px 0 0 3px; 161 } 162 .navigation { 163 height: 50px; 164 font-size: 11px; 165 line-height: 50px; 166 text-transform: uppercase; 167 position: relative; 168 float: left; 169 padding: 0 20px; 170 border: 1px solid #aaa; 171 border-top: 0; border-bottom: 0; border-left-width: 0; 172 cursor: pointer; 173 } 174 .navigation.toc { 175 border-left-width: 1px; 176 } 177 .navigation:hover, 178 .navigation.active { 179 background: #eee; 180 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f8f8f8)); 181 background: -moz-linear-gradient(top, #eee, #f8f8f8); 182 } 183 .navigation.active { 184 height: 51px; 185 color: #000; 186 background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#fff)); 187 background: -moz-linear-gradient(top, #e5e5e5, #fff); 188 } 189 .navigation .button { 190 font-weight: bold; 191 } 192 .navigation .button::selection { 193 background: transparent; 194 } 195 .navigation .contents { 196 display: none; 197 position: absolute; 198 background: #fff; 199 opacity: 0.97; 200 top: 51px; left: 0; 201 padding: 5px 0; 202 margin-left: -1px; 203 border: 1px solid #aaa; 204 -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 205 -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); 206 -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2); 207 box-shadow: 0 3px 5px rgba(0,0,0,0.2); 208 } 209 .navigation .contents a { 210 display: block; 211 width: 290px; 212 text-transform: none; 213 text-decoration: none; 214 height: 12px; 215 line-height: 12px; 216 padding: 4px 10px; 217 border: 1px solid transparent; 218 border-left: 0; border-right: 0; 219 } 220 .navigation .contents a:hover { 221 border-color: #ddd; 222 background: #eee; 223 } 224 .navigation.active .contents { 225 display: block; 226 } 227 .navigation .contents.menu { 228 z-index: 100; 229 border-top: 0; 230 -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; 231 -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; 232 } 233 .navigation .contents.repl_wrapper { 234 padding: 0; 235 position: fixed; 236 width: auto; height: auto; 237 left: 40px; top: 90px; right: 40px; bottom: 30px; 238 background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eaeaea)); 239 } 240 .navigation .repl_bridge { 241 position: absolute; 242 height: 12px; 243 left: -1px; right: -1px; 244 bottom: -14px; 245 border: 1px solid #aaa; 246 z-index: 5; 247 background: #fff; 248 display: none; 249 border-top-color: #fff; border-bottom-color: #fff; 250 } 251 .navigation.active .repl_bridge { 252 display: block; 253 } 254 .navigation .code .minibutton { 255 top: 10px; right: 10px; 256 width: 40px; 257 text-transform: none; 258 } 259 .navigation .code a.minibutton.permalink { 260 top: 38px; 261 display: block; 262 } 263 264.bookmark { 265 display: block; 266 width: 0; height: 0; 267 position: relative; 268 top: -90px; 269} 270 271.navigation .contents.repl_wrapper .code { 272 cursor: text; 273 -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; 274 background: #181a3a url(../images/banding.png); 275 border: 2px solid #555; 276 padding: 0; 277 position: absolute; 278 top: 15px; left: 15px; right: 15px; bottom: 15px; 279} 280 .repl_wrapper .screenshadow { 281 position: absolute; 282 width: 200px; height: 150px; 283 background: url(../images/screenshadow.png?2); 284 } 285 .repl_wrapper .screenshadow.tl { 286 top: 0; left: 0; 287 background-position: 0 0; 288 } 289 .repl_wrapper .screenshadow.tr { 290 top: 0; right: 0; 291 background-position: -200px 0; 292 } 293 .repl_wrapper .screenshadow.bl { 294 bottom: 0; left: 0; 295 background-position: 0 -150px; 296 } 297 .repl_wrapper .screenshadow.br { 298 bottom: 0; right: 0; 299 background-position: -200px -150px; 300 } 301 302#repl_source, #repl_results { 303 background: transparent; 304 outline: none; 305 margin: 5px 0 20px; 306 color: #def; 307} 308 #repl_results, #repl_source_wrap { 309 width: auto; height: auto; 310 position: absolute; 311 margin-bottom: 0; 312 top: 10px; left: 10px; right: 10px; bottom: 15px; 313 } 314 #repl_results.error { 315 color: red 316 } 317 #repl_source_wrap { 318 margin-left: 5px; 319 width: 47%; right: 50%; 320 float: left; 321 } 322 #repl_source { 323 padding-left: 5px; 324 width: 100%; 325 height: 100%; 326 border: 0; 327 overflow-y: auto; 328 resize: none; 329 } 330 #repl_results_wrap { 331 white-space: pre; 332 } 333 #repl_results { 334 text-transform: none; 335 overflow-y: auto; 336 left: 50%; 337 border-left-color: #555; 338 } 339 340/*----------------------------- Mini Buttons ---------------------------------*/ 341.minibutton { 342 cursor: pointer; 343 color: #333; 344 text-shadow: #eee 0 1px 1px; 345 font-weight: bold; 346 font-size: 11px; 347 line-height: 11px; 348 padding: 5px 10px 6px; 349 height: 11px; 350 text-align: center; 351 -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 352 box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); 353 border: 1px solid #b2b2b2; border-top-color: #c9c9c9; border-bottom-color: #9a9a9a; 354 background: url(../images/button_bg.png) repeat-x left top; 355} 356 .minibutton:active { 357 border-color: #aaa; 358 box-shadow: 0 1px 2px #e4e4e4; -webkit-box-shadow: 0 1px 2px #e4e4e4; -moz-box-shadow: 0 1px 2px #e4e4e4; 359 } 360 .minibutton::selection { 361 background: transparent; 362 } 363 .minibutton ::-moz-selection { 364 background: transparent; 365 } 366 .minibutton.ok { 367 color: #fff; 368 background-image: url(../images/button_bg_green.gif); 369 border-color: #4ba47c; border-top-color: #53b388; border-bottom-color: #459671; 370 text-shadow: #aaa 0 -1px 0; 371 } 372 .minibutton.dark { 373 border: 0; 374 color: #fff; 375 box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 376 background-image: url(../images/button_bg_dark.gif); 377 text-shadow: none; 378 } 379 .minibutton.error { 380 opacity: 0.5; 381 color: #600; 382 cursor: not-allowed; 383 } 384 385@media (max-width: 820px) { 386 .container { 387 width: auto; 388 padding: 1em; 389 } 390 p, li, table { 391 width: auto; 392 } 393 #fadeout { 394 display: none; 395 } 396 #flybar { 397 position: static; 398 height: auto; 399 min-width: 245px; 400 } 401 #logo { 402 float: none; 403 } 404 .navigation { 405 float: none; 406 border: none; 407 } 408 div.code pre, div.code textarea { 409 border-left: none; 410 border-top-width: 1px; 411 width: auto; 412 float: none; 413 } 414 div.code pre:first-child { 415 border-top: none; 416 } 417}