| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- body, html {
- margin: 0;
- font-family: Tahoma;
- font-size: 11pt;
- }
- body {
- padding: 15px;
- }
- br {
- display: block;
- content: "";
- margin-top: 15px;
- }
- h2 {
- padding-top: 1em;
- }
- canvas {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- }
- .aspect {
- position: relative;
- width: 100%;
- }
- .standalone {
- width: 640px;
- height: 480px;
- }
- .demo {
- clear: both;
- }
- .demo-container {
- float: left;
- width: 58%;
- }
- .demo-text {
- float: left;
- width: 38%;
- margin-left: 2%;
- margin-right: 2%;
- }
- .timeline, .timeline td:nth-child(2) {
- width: 100%;
- }
- .play {
- background: black;
- background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E");
- width: 40px;
- height: 30px;
- }
- .pause {
- background: black;
- background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E");
- width: 40px;
- height: 30px;
- margin: 0;
- }
- .checkbox {
- display: inline;
- }
- .slider {
- width: 100%;
- max-width: 800px;
- border-radius: 3px;
- text-align: left;
- transform: translateZ(0);
- background: #222;
- display: inline-block;
- }
- .slider, .slider.filled span {
- height: 15px;
- border: 1px solid #c5c5c5;
- }
- .slider div {
- position: absolute;
- top: -2px;
- width: 10px;
- height: 17px;
- background: white;
- border: #000 1px solid;
- border-radius: 2px;
- z-index: 10;
- }
- .slider.filled {
- border: 0;
- }
- .slider.filled div {
- top: -1px;
- margin-left: 1px;
- }
- .slider.filled span {
- display: block;
- position: absolute;
- background: #3ea9f5;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- z-index: 5;
- }
- .slider.filled span:last-child {
- background: #222;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- .overlay {
- opacity: 1;
- transition: opacity 0.5s ease;
- z-index: 10;
- }
- .overlay-hide {
- opacity: 0;
- }
- .overlay-label {
- display: none;
- }
|