github.com/graybobo/golang.org-package-offline-cache@v0.0.0-20200626051047-6608995c132f/x/tools/cmd/present/static/styles.css (about) 1 @media screen { 2 /* Framework */ 3 html { 4 height: 100%; 5 } 6 7 body { 8 margin: 0; 9 padding: 0; 10 11 display: block !important; 12 13 height: 100%; 14 min-height: 740px; 15 16 overflow-x: hidden; 17 overflow-y: auto; 18 19 background: rgb(215, 215, 215); 20 background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 21 background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 22 background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 23 background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); 24 25 -webkit-font-smoothing: antialiased; 26 } 27 28 .slides { 29 width: 100%; 30 height: 100%; 31 left: 0; 32 top: 0; 33 34 position: absolute; 35 36 -webkit-transform: translate3d(0, 0, 0); 37 } 38 39 .slides > article { 40 display: block; 41 42 position: absolute; 43 overflow: hidden; 44 45 width: 900px; 46 height: 700px; 47 48 left: 50%; 49 top: 50%; 50 51 margin-left: -450px; 52 margin-top: -350px; 53 54 padding: 40px 60px; 55 56 box-sizing: border-box; 57 -o-box-sizing: border-box; 58 -moz-box-sizing: border-box; 59 -webkit-box-sizing: border-box; 60 61 border-radius: 10px; 62 -o-border-radius: 10px; 63 -moz-border-radius: 10px; 64 -webkit-border-radius: 10px; 65 66 background-color: white; 67 68 border: 1px solid rgba(0, 0, 0, .3); 69 70 transition: transform .3s ease-out; 71 -o-transition: -o-transform .3s ease-out; 72 -moz-transition: -moz-transform .3s ease-out; 73 -webkit-transition: -webkit-transform .3s ease-out; 74 } 75 .slides.layout-widescreen > article { 76 margin-left: -550px; 77 width: 1100px; 78 } 79 .slides.layout-faux-widescreen > article { 80 margin-left: -550px; 81 width: 1100px; 82 83 padding: 40px 160px; 84 } 85 86 .slides.layout-widescreen > article:not(.nobackground):not(.biglogo), 87 .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { 88 background-position-x: 0, 840px; 89 } 90 91 /* Clickable/tappable areas */ 92 93 .slide-area { 94 z-index: 1000; 95 96 position: absolute; 97 left: 0; 98 top: 0; 99 width: 150px; 100 height: 700px; 101 102 left: 50%; 103 top: 50%; 104 105 cursor: pointer; 106 margin-top: -350px; 107 108 tap-highlight-color: transparent; 109 -o-tap-highlight-color: transparent; 110 -moz-tap-highlight-color: transparent; 111 -webkit-tap-highlight-color: transparent; 112 } 113 #prev-slide-area { 114 margin-left: -550px; 115 } 116 #next-slide-area { 117 margin-left: 400px; 118 } 119 .slides.layout-widescreen #prev-slide-area, 120 .slides.layout-faux-widescreen #prev-slide-area { 121 margin-left: -650px; 122 } 123 .slides.layout-widescreen #next-slide-area, 124 .slides.layout-faux-widescreen #next-slide-area { 125 margin-left: 500px; 126 } 127 128 /* Slides */ 129 130 .slides > article { 131 display: none; 132 } 133 .slides > article.far-past { 134 display: block; 135 transform: translate(-2040px); 136 -o-transform: translate(-2040px); 137 -moz-transform: translate(-2040px); 138 -webkit-transform: translate3d(-2040px, 0, 0); 139 } 140 .slides > article.past { 141 display: block; 142 transform: translate(-1020px); 143 -o-transform: translate(-1020px); 144 -moz-transform: translate(-1020px); 145 -webkit-transform: translate3d(-1020px, 0, 0); 146 } 147 .slides > article.current { 148 display: block; 149 transform: translate(0); 150 -o-transform: translate(0); 151 -moz-transform: translate(0); 152 -webkit-transform: translate3d(0, 0, 0); 153 } 154 .slides > article.next { 155 display: block; 156 transform: translate(1020px); 157 -o-transform: translate(1020px); 158 -moz-transform: translate(1020px); 159 -webkit-transform: translate3d(1020px, 0, 0); 160 } 161 .slides > article.far-next { 162 display: block; 163 transform: translate(2040px); 164 -o-transform: translate(2040px); 165 -moz-transform: translate(2040px); 166 -webkit-transform: translate3d(2040px, 0, 0); 167 } 168 169 .slides.layout-widescreen > article.far-past, 170 .slides.layout-faux-widescreen > article.far-past { 171 display: block; 172 transform: translate(-2260px); 173 -o-transform: translate(-2260px); 174 -moz-transform: translate(-2260px); 175 -webkit-transform: translate3d(-2260px, 0, 0); 176 } 177 .slides.layout-widescreen > article.past, 178 .slides.layout-faux-widescreen > article.past { 179 display: block; 180 transform: translate(-1130px); 181 -o-transform: translate(-1130px); 182 -moz-transform: translate(-1130px); 183 -webkit-transform: translate3d(-1130px, 0, 0); 184 } 185 .slides.layout-widescreen > article.current, 186 .slides.layout-faux-widescreen > article.current { 187 display: block; 188 transform: translate(0); 189 -o-transform: translate(0); 190 -moz-transform: translate(0); 191 -webkit-transform: translate3d(0, 0, 0); 192 } 193 .slides.layout-widescreen > article.next, 194 .slides.layout-faux-widescreen > article.next { 195 display: block; 196 transform: translate(1130px); 197 -o-transform: translate(1130px); 198 -moz-transform: translate(1130px); 199 -webkit-transform: translate3d(1130px, 0, 0); 200 } 201 .slides.layout-widescreen > article.far-next, 202 .slides.layout-faux-widescreen > article.far-next { 203 display: block; 204 transform: translate(2260px); 205 -o-transform: translate(2260px); 206 -moz-transform: translate(2260px); 207 -webkit-transform: translate3d(2260px, 0, 0); 208 } 209 } 210 211 @media print { 212 /* Set page layout */ 213 @page { 214 size: A4 landscape; 215 } 216 217 body { 218 display: block !important; 219 } 220 221 .slides > article { 222 display: block; 223 224 position: relative; 225 226 page-break-inside: never; 227 page-break-after: always; 228 229 overflow: hidden; 230 } 231 232 h2 { 233 position: static !important; 234 margin-top: 400px !important; 235 margin-bottom: 100px !important; 236 } 237 238 div.code { 239 background: rgb(240, 240, 240); 240 } 241 242 /* Add explicit links */ 243 a:link:after, a:visited:after { 244 content: " (" attr(href) ") "; 245 font-size: 50%; 246 } 247 248 #help { 249 display: none; 250 visibility: hidden; 251 } 252 } 253 254 /* Styles for slides */ 255 256 .slides > article { 257 font-family: 'Open Sans', Arial, sans-serif; 258 259 color: black; 260 text-shadow: 0 1px 1px rgba(0, 0, 0, .1); 261 262 font-size: 26px; 263 line-height: 36px; 264 265 letter-spacing: -1px; 266 } 267 268 b { 269 font-weight: 600; 270 } 271 272 a { 273 color: rgb(0, 102, 204); 274 text-decoration: none; 275 } 276 a:visited { 277 color: rgba(0, 102, 204, .75); 278 } 279 a:hover { 280 color: black; 281 } 282 283 p { 284 margin: 0; 285 padding: 0; 286 287 margin-top: 20px; 288 } 289 p:first-child { 290 margin-top: 0; 291 } 292 293 h1 { 294 font-size: 60px; 295 line-height: 60px; 296 297 padding: 0; 298 margin: 0; 299 margin-top: 200px; 300 margin-bottom: 5px; 301 padding-right: 40px; 302 303 font-weight: 600; 304 305 letter-spacing: -3px; 306 307 color: rgb(51, 51, 51); 308 } 309 310 h2 { 311 font-size: 45px; 312 line-height: 45px; 313 314 position: absolute; 315 bottom: 150px; 316 317 padding: 0; 318 margin: 0; 319 padding-right: 40px; 320 321 font-weight: 600; 322 323 letter-spacing: -2px; 324 325 color: rgb(51, 51, 51); 326 } 327 328 h3 { 329 font-size: 30px; 330 line-height: 36px; 331 332 padding: 0; 333 margin: 0; 334 padding-right: 40px; 335 336 font-weight: 600; 337 338 letter-spacing: -1px; 339 340 color: rgb(51, 51, 51); 341 } 342 343 ul { 344 margin: 0; 345 padding: 0; 346 margin-top: 20px; 347 margin-left: 1.5em; 348 } 349 li { 350 padding: 0; 351 margin: 0 0 .5em 0; 352 } 353 354 div.code { 355 padding: 5px 10px; 356 margin-top: 20px; 357 margin-bottom: 20px; 358 overflow: hidden; 359 360 background: rgb(240, 240, 240); 361 border: 1px solid rgb(224, 224, 224); 362 } 363 pre { 364 margin: 0; 365 padding: 0; 366 367 font-family: 'Droid Sans Mono', 'Courier New', monospace; 368 font-size: 18px; 369 line-height: 24px; 370 letter-spacing: -1px; 371 372 color: black; 373 } 374 375 code { 376 font-size: 95%; 377 font-family: 'Droid Sans Mono', 'Courier New', monospace; 378 379 color: black; 380 } 381 382 article > .image { 383 text-align: center; 384 margin-top: 40px; 385 } 386 387 table { 388 width: 100%; 389 border-collapse: collapse; 390 margin-top: 40px; 391 } 392 th { 393 font-weight: 600; 394 text-align: left; 395 } 396 td, 397 th { 398 border: 1px solid rgb(224, 224, 224); 399 padding: 5px 10px; 400 vertical-align: top; 401 } 402 403 p.link { 404 margin-left: 20px; 405 } 406 407 /* Code */ 408 div.code { 409 outline: 0px solid transparent; 410 } 411 div.playground { 412 position: relative; 413 } 414 div.output { 415 position: absolute; 416 left: 50%; 417 top: 50%; 418 right: 40px; 419 bottom: 40px; 420 background: #202020; 421 padding: 5px 10px; 422 z-index: 2; 423 424 border-radius: 10px; 425 -o-border-radius: 10px; 426 -moz-border-radius: 10px; 427 -webkit-border-radius: 10px; 428 429 } 430 div.output pre { 431 margin: 0; 432 padding: 0; 433 background: none; 434 border: none; 435 width: 100%; 436 height: 100%; 437 overflow: auto; 438 } 439 div.output .stdout, div.output pre { 440 color: #e6e6e6; 441 } 442 div.output .stderr, div.output .error { 443 color: rgb(255, 200, 200); 444 } 445 div.output .system, div.output .exit { 446 color: rgb(255, 230, 120) 447 } 448 .buttons { 449 position: relative; 450 float: right; 451 top: -60px; 452 right: 10px; 453 } 454 div.output .buttons { 455 position: absolute; 456 float: none; 457 top: auto; 458 right: 5px; 459 bottom: 5px; 460 } 461 462 /* Presenter details */ 463 .presenter { 464 margin-top: 20px; 465 } 466 .presenter p, 467 .presenter .link { 468 margin: 0; 469 font-size: 28px; 470 line-height: 1.2em; 471 } 472 473 /* Output resize details */ 474 .ui-resizable-handle { 475 position: absolute; 476 } 477 .ui-resizable-n { 478 cursor: n-resize; 479 height: 7px; 480 width: 100%; 481 top: -5px; 482 left: 0; 483 } 484 .ui-resizable-w { 485 cursor: w-resize; 486 width: 7px; 487 left: -5px; 488 top: 0; 489 height: 100%; 490 } 491 .ui-resizable-nw { 492 cursor: nw-resize; 493 width: 9px; 494 height: 9px; 495 left: -5px; 496 top: -5px; 497 } 498 iframe { 499 border: none; 500 } 501 figcaption { 502 color: #666; 503 text-align: center; 504 font-size: 0.75em; 505 } 506 507 #help { 508 font-family: 'Open Sans', Arial, sans-serif; 509 text-align: center; 510 color: white; 511 background: #000; 512 opacity: 0.5; 513 position: fixed; 514 bottom: 25px; 515 left: 50px; 516 right: 50px; 517 padding: 20px; 518 519 border-radius: 10px; 520 -o-border-radius: 10px; 521 -moz-border-radius: 10px; 522 -webkit-border-radius: 10px; 523 }