UNPKG

crossbrowdy

Version:

A Multimedia JavaScript framework to create real cross-platform and hybrid game engines, games, emulators, multimedia libraries and apps.

143 lines (142 loc) 2.52 kB
body { font-family: 'Hammersmith One', sans-serif; box-sizing: border-box; padding: 1em; } body * { box-sizing: inherit; } b { font-size: 1.2em; } .hero { width: 500px; max-width: 98%; box-shadow: 5px 5px 2px #666; margin-left: auto; margin-right: auto; display: block; } .title { font-size: 5em; text-align: center; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 4px 4px 2px #ccc; line-height: 1em; letter-spacing: 2vw; } .title-2 { font-size: 3em; text-align: center; text-shadow: 4px 4px 2px #ccc; line-height: 1em; letter-spacing: 1vw; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 4px 4px 2px #ccc; } .target-wrap { width: 49.5%; margin: 0; padding: 0; display: inline-block; vertical-align: top; } .target { width: 250px; margin-left: auto; margin-right: auto; height: 225px; border: 1px solid #666; box-shadow: 5px 5px 3px #ccc; padding: 1em; vertical-align: top; } .hit-target { width: 96%; margin: auto; height: 75px; background: orange; color: black; text-align: center; margin-top: 1em; } .hit-target:after { position: relative; top: calc( 37px - .5em ); content: "Target"; } .click-gauge { -webkit-appearance: none; height: 2em; width: 100%; border-radius: 2px } .click-gauge[value]::-webkit-progress-bar { box-shadow: inset -3px -3px 3px #ccc, inset 3px 3px 3px #ccc; background-color: #fff; border-radius: 2px; overflow: hidden; } .click-gauge[value]::-webkit-progress-value { box-shadow: 2px .5px 1px #333, inset 2px 2px 7px darkgreen, inset -2px -2px 7px darkgreen; border-radius: 2px 0 0 2px; position: relative; } .click-gauge.warning[value]::-webkit-progress-value { background: orange; box-shadow: 2px .5px 1px #333, inset 2px 2px 7px darkorange, inset -2px -2px 7px darkorange; } .click-gauge.failure[value]::-webkit-progress-value { background: red; box-shadow: 2px .5px 1px #333, inset 2px 2px 7px darkred, inset -2px -2px 7px darkred; } .output { height: 30px; width: 100%; display: block; } .hammer-time { background: url(http://s3.amazonaws.com/rapgenius/anigif_enhanced-buzz-10302-1375465808-15.gif); } .body-wrap { width: 100%; max-width: 1000px; margin: auto; } .clicked { color: white; border: 1px solid #003eff; background: #007fff; } @media ( max-width: 600px ) { .target-wrap { width: 100%; margin-bottom: 2em; } .title { font-size: 2em; } .title-2 { font-size: 1em; line-height: normal; } }