Created
January 27, 2014 23:27
-
-
Save jjcall/8659546 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .jackbox-modal { | |
| font: 12px Arial, Helvetica, sans-serif; | |
| color: #666; | |
| line-height: 18px; | |
| background: rgba(0, 0, 0, 0.75); | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| -o-box-sizing: content-box; | |
| -ms-box-sizing: content-box; | |
| box-sizing: content-box; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| .jackbox-modal * { | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| -o-box-sizing: content-box; | |
| -ms-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| .jackbox-container img { | |
| max-width: none; | |
| } | |
| .jackbox-modal h2, .jackbox-modal h3 { | |
| font: 24px "Mako", sans-serif; | |
| font-weight: normal; | |
| color: #444; | |
| } | |
| .jackbox-title-text { | |
| font: 14px "Mako", sans-serif; | |
| color: #222; | |
| } | |
| .jackbox-thumb-tip { | |
| background: url(../img/graphics/ie_bg.png); | |
| background: rgba(0, 0, 0, 0.75); | |
| } | |
| .jackbox-thumb-tip-text { | |
| font: 12px "Mako", sans-serif; | |
| text-transform: uppercase; | |
| color: #FFF; | |
| } | |
| .jackbox-description-text { | |
| background-color: #FFF; | |
| text-align: left; | |
| } | |
| .jackbox-html>div { | |
| background-color: #f5f5f5; | |
| border: 1px solid #e5e5e5; | |
| text-align: left; | |
| } | |
| .jackbox-holder { | |
| background-color: #FFF; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .jackbox-container { | |
| background: #000; | |
| background: -moz-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0, rgba(0, 0, 0, 1) 100%); | |
| background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(68, 68, 68, 1)), color-stop(100%, rgba(0, 0, 0, 1))); | |
| background: -webkit-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0, rgba(0, 0, 0, 1) 100%); | |
| background: -o-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0, rgba(0, 0, 0, 1) 100%); | |
| background: -ms-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0, rgba(0, 0, 0, 1) 100%); | |
| background: radial-gradient(ellipse at center, rgba(68, 68, 68, 1) 0, rgba(0, 0, 0, 1) 100%); | |
| } | |
| .jackbox-panel:hover { | |
| background-color: #333; | |
| } | |
| .jackbox-panel-left { | |
| background-image: url(../img/graphics/panel_left.png); | |
| } | |
| .jackbox-panel-right { | |
| background-image: url(../img/graphics/panel_right.png); | |
| } | |
| .jackbox-panel-left:hover { | |
| -webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); | |
| box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); | |
| border-right: 1px solid #4d4d4d; | |
| background-image: url(../img/graphics/panel_left_over.png); | |
| } | |
| .jackbox-panel-right:hover { | |
| -webkit-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); | |
| box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); | |
| border-left: 1px solid #4d4d4d; | |
| background-image: url(../img/graphics/panel_right_over.png); | |
| } | |
| .jackbox-button { | |
| width: 20px; | |
| height: 20px; | |
| background-size: 20px 20px; | |
| background-repeat: no-repeat; | |
| } | |
| .jackbox-arrow-left { | |
| background-image: url(../img/graphics/left_arrow.png); | |
| } | |
| .jackbox-arrow-right { | |
| background-image: url(../img/graphics/right_arrow.png); | |
| } | |
| .jackbox-info { | |
| background-image: url(../img/graphics/info.png); | |
| } | |
| .jackbox-show-thumbs { | |
| background-image: url(../img/graphics/thumbs_show.png); | |
| } | |
| .jackbox-hide-thumbs { | |
| background-image: url(../img/graphics/thumbs_hide.png); | |
| } | |
| .jackbox-close { | |
| background-image: url(../img/graphics/exit.png); | |
| } | |
| .jackbox-fs { | |
| background-image: url(../img/graphics/fullscreen.png); | |
| } | |
| .jackbox-ns { | |
| background-image: url(../img/graphics/normalscreen.png); | |
| } | |
| .jb-info-inactive, .jackbox-button:hover { | |
| opacity: .6; | |
| } | |
| .jackbox-thumb-panel { | |
| background: url(../img/graphics/ie_bg.png); | |
| background: rgba(0, 0, 0, 0.75); | |
| } | |
| .jackbox-thumb-left { | |
| width: 20px; | |
| height: 20px; | |
| margin: -9px 0 0 -30px; | |
| background-size: 20px 20px; | |
| background-repeat: no-repeat; | |
| background-image: url(../img/graphics/thumb_left.png); | |
| } | |
| .jackbox-thumb-right { | |
| width: 20px; | |
| height: 20px; | |
| margin: -9px 0 0 12px; | |
| background-size: 20px 20px; | |
| background-repeat: no-repeat; | |
| background-image: url(../img/graphics/thumb_right.png); | |
| } | |
| .jackbox-thumb-left:hover, .jackbox-thumb-right:hover { | |
| opacity: .70; | |
| } | |
| .jackbox-pre-outside { | |
| padding: 5px; | |
| background: url(../img/graphics/ie_preloader.gif); | |
| background: -moz-linear-gradient(top, #FFF 0, #FFF 25%, #444 90%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(25%, #FFF), color-stop(90%, #444)); | |
| background: -webkit-linear-gradient(top, #FFF 0, #FFF 25%, #444 90%); | |
| background: -o-linear-gradient(top, #FFF 0, #FFF 25%, #444 90%); | |
| background: -ms-linear-gradient(top, #FFF 0, #FFF 25%, #444 90%); | |
| background: linear-gradient(to bottom, #FFF 0, #FFF 25%, #444 90%); | |
| } | |
| .jackbox-pre-inside { | |
| background-color: #444; | |
| } | |
| .jackbox { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .jackbox-modal { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: none; | |
| z-index: 9999; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| .jackbox-modal h2 { | |
| margin: 0 0 12px -2px; | |
| } | |
| .jackbox-modal h3 { | |
| margin: 0 0 8px -2px; | |
| } | |
| .jackbox-modal ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .jackbox-modal li { | |
| margin: 0 0 10px 0; | |
| padding: 0; | |
| } | |
| .jackbox-modal li:last-child { | |
| margin-bottom: -10px; | |
| } | |
| .jackbox-html>div { | |
| padding: 16px 20px 16px 20px; | |
| box-sizing: border-box; | |
| } | |
| .jackbox-html>div p { | |
| margin: 5px 0 0 0; | |
| color: #808080; | |
| } | |
| .jackbox-title-text { | |
| position: absolute; | |
| left: 6px; | |
| top: 7px; | |
| width: 100%; | |
| overflow: hidden; | |
| text-align: center; | |
| white-space: nowrap; | |
| z-index: 0; | |
| } | |
| .jackbox-info-text { | |
| display: inline-block; | |
| overflow-y: auto; | |
| z-index: 999; | |
| width: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .jackbox-description-text { | |
| padding: 14px 17px 19px 17px; | |
| } | |
| .jackbox-html, .jackbox-wrapper, .jackbox-content, .jackbox-description, .jackbox-hidden-items { | |
| display: none; | |
| } | |
| .jackbox-youtube { | |
| visibility: hidden; | |
| margin: 0 auto; | |
| } | |
| .jackbox-html { | |
| overflow-y: auto; | |
| } | |
| .jackbox-modal img { | |
| image-rendering: optimizeQuality; | |
| } | |
| .jackbox-holder { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| opacity: 0; | |
| padding: 33px 6px 34px 6px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| .jackbox-container { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 0; | |
| text-align: center; | |
| } | |
| .jackbox-content { | |
| margin: 0 auto; | |
| } | |
| .jackbox-overflow { | |
| overflow: hidden!important; | |
| } | |
| .jackbox-thumb-holder { | |
| position: absolute; | |
| width: 100%; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .jackbox-thumb-panel { | |
| position: absolute; | |
| left: 50%; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| padding: 2px 2px 0 2px; | |
| } | |
| .jackbox-thumb-strip { | |
| position: relative; | |
| } | |
| .jackbox-thumb { | |
| overflow: hidden; | |
| position: absolute; | |
| top: 0; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| .jackbox-thumb img { | |
| cursor: pointer; | |
| -ms-filter: "alpha(opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transition: opacity .4s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: opacity .4s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: opacity .4s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: opacity .4s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: opacity .4s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jb-thumb-fadein img { | |
| -ms-filter: "alpha(opacity=50)"; | |
| filter: alpha(opacity=50); | |
| opacity: .5; | |
| } | |
| .jb-thumb-active img { | |
| -ms-filter: "alpha(opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| .jb-thumb-hover img:hover { | |
| -ms-filter: "alpha(opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| .jb-thumb-active img { | |
| cursor: auto; | |
| } | |
| .jackbox-thumb-left, .jackbox-thumb-right { | |
| cursor: pointer; | |
| position: absolute; | |
| display: none; | |
| } | |
| .jackbox-top { | |
| position: absolute; | |
| top: 7px; | |
| left: 5px; | |
| } | |
| .jackbox-top:after { | |
| content: ""; | |
| position: absolute; | |
| top: 26px; | |
| left: 1px; | |
| width: 100%; | |
| height: 1px; | |
| background-color: #FFF; | |
| display: block; | |
| z-index: 999; | |
| } | |
| .jackbox-bottom { | |
| position: relative; | |
| white-space: nowrap; | |
| z-index: 99; | |
| } | |
| .jackbox-social { | |
| position: absolute; | |
| } | |
| .jackbox-top-icons { | |
| position: absolute; | |
| right: -1px; | |
| } | |
| .jackbox-bottom-icons { | |
| position: absolute; | |
| right: 0; | |
| top: 7px; | |
| } | |
| .jackbox-controls { | |
| position: absolute; | |
| left: 0; | |
| top: 7px; | |
| z-index: 1; | |
| } | |
| .jackbox-button { | |
| cursor: pointer; | |
| display: inline-block; | |
| } | |
| .jackbox-arrow-right { | |
| margin-left: 6px; | |
| } | |
| .jackbox-button-margin { | |
| margin-left: 6px; | |
| } | |
| :-webkit-full-screen .jackbox-fs { | |
| display: none!important; | |
| } | |
| :-moz-full-screen .jackbox-fs { | |
| display: none!important; | |
| } | |
| :-webkit-full-screen .jackbox-ns { | |
| display: inline-block!important; | |
| } | |
| :-moz-full-screen .jackbox-ns { | |
| display: inline-block!important; | |
| } | |
| .jackbox-panel { | |
| display: block; | |
| cursor: pointer; | |
| visibility: hidden; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: 38px 38px; | |
| width: 58px; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| -ms-filter: "alpha(opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox-panel-left { | |
| left: 0; | |
| } | |
| .jackbox-panel-right { | |
| right: 0; | |
| } | |
| .jackbox-preloader { | |
| position: fixed; | |
| left: 50%; | |
| top: 50%; | |
| visibility: hidden; | |
| width: 20px; | |
| height: 20px; | |
| margin: -15px 0 0 -15px; | |
| z-index: 9999; | |
| } | |
| .jackbox-spin-preloader { | |
| visibility: visible; | |
| -webkit-animation: rotator 1s linear infinite; | |
| -moz-animation: rotator 1s linear infinite; | |
| -ms-animation: rotator 1s linear infinite; | |
| -o-animation: rotator 1s linear infinite; | |
| animation: rotator 1s linear infinite; | |
| } | |
| .jackbox-pre-outside { | |
| width: 20px; | |
| height: 20px; | |
| display: inline-block; | |
| position: relative; | |
| top: -25%; | |
| left: -25%; | |
| -moz-border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| border-radius: 50%} | |
| .jackbox-pre-inside { | |
| display: none; | |
| width: 20px; | |
| height: 20px; | |
| display: inline-block; | |
| position: absolute; | |
| top: 5px; | |
| left: 5px; | |
| -moz-border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| border-radius: 50%; | |
| -webkit-transition: background-color .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: background-color .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: background-color .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: background-color .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: background-color .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox-thumb-tip { | |
| display: block; | |
| position: fixed; | |
| overflow: hidden; | |
| opacity: 0; | |
| z-index: 9999; | |
| visibility: hidden; | |
| pointer-events: none; | |
| padding: 5px 10px 5px 10px; | |
| -webkit-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox-thumb-tip-text { | |
| white-space: nowrap; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| -webkit-transition: width .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: width .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: width .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: width .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: width .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| @-webkit-keyframes rotator { | |
| from { | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(180deg); | |
| } | |
| to { | |
| -webkit-transform: rotate(360deg); | |
| } | |
| }@-moz-keyframes rotator { | |
| from { | |
| -moz-transform: rotate(0deg); | |
| } | |
| 50% { | |
| -moz-transform: rotate(180deg); | |
| } | |
| to { | |
| -moz-transform: rotate(360deg); | |
| } | |
| }@-o-keyframes rotator { | |
| from { | |
| -o-transform: rotate(0deg); | |
| } | |
| 50% { | |
| -o-transform: rotate(180deg); | |
| } | |
| to { | |
| -o-transform: rotate(360deg); | |
| } | |
| }@-ms-keyframes rotator { | |
| from { | |
| -ms-transform: rotate(0deg); | |
| } | |
| 50% { | |
| -ms-transform: rotate(180deg); | |
| } | |
| to { | |
| -ms-transform: rotate(360deg); | |
| } | |
| }@keyframes rotator { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| transform: rotate(180deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| }@media screen and (max-width:600px) { | |
| .jackbox-panel, .jackbox-thumb-holder { | |
| display: none!important; | |
| } | |
| .jackbox-show-thumbs, .jackbox-hide-thumbs { | |
| width: 0; | |
| margin-left: 0; | |
| overflow: hidden; | |
| } | |
| }@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolution:192dpi), only screen and (min-resolution:2dppx) { | |
| .jackbox-arrow-left { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-arrow-right { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-info { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-show-thumbs { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-hide-thumbs { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-close { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-fs { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-ns { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-thumb-left { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-thumb-right { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-panel-left { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-panel-right { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-panel-left:hover { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-panel-right:hover { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| } | |
| .jackbox-hover { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| position: absolute; | |
| background-position: center 75%; | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| opacity: 0; | |
| -ms-filter: "alpha(opacity=0)"; | |
| filter: alpha(opacity=0); | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| -o-box-sizing: content-box; | |
| -ms-box-sizing: content-box; | |
| box-sizing: content-box; | |
| -webkit-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox-hover * { | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| -o-box-sizing: content-box; | |
| -ms-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| .jackbox-hover:visited { | |
| text-decoration: none!} | |
| .jackbox-hover-black { | |
| background-color: #000; | |
| background-color: rgba(0, 0, 0, 0.65); | |
| } | |
| .jackbox-hover-white { | |
| background-color: #FFF; | |
| background-color: rgba(255, 255, 255, 0.9); | |
| } | |
| .jackbox-hover-magnify { | |
| background-image: url(../img/graphics/hover_magnify.png); | |
| } | |
| .jackbox-hover-play { | |
| background-image: url(../img/graphics/hover_play.png); | |
| } | |
| .jackbox-hover-document { | |
| background-image: url(../img/graphics/hover_document.png); | |
| } | |
| .jackbox-hover-blur { | |
| background-color: #000; | |
| background-color: rgba(255, 255, 255, 0.25); | |
| } | |
| .jackbox-canvas-blur { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| -ms-filter: "alpha(opacity=0)"; | |
| filter: alpha(opacity=0); | |
| -webkit-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox:hover>.jackbox-hover { | |
| opacity: 1; | |
| -ms-filter: "alpha(opacity=100)"; | |
| filter: alpha(opacity=100); | |
| background-position: center center; | |
| } | |
| .jackbox:hover>.jackbox-canvas-blur { | |
| opacity: 1; | |
| -ms-filter: "alpha(opacity=100)"; | |
| filter: alpha(opacity=100); | |
| } | |
| .jackbox>.jackbox-hover-black, .jackbox>.jackbox-hover-blur, .jackbox:visited>.jackbox-hover-black, .jackbox:visited>.jackbox-hover-blur { | |
| color: #EEE; | |
| } | |
| .jackbox>.jackbox-hover-white, .jackbox:visited>.jackbox-hover-white { | |
| color: #333; | |
| } | |
| .jackbox { | |
| font: 14px "Mako", sans-serif; | |
| text-decoration: none; | |
| line-height: 0; | |
| } | |
| .jackbox-hover p { | |
| margin: 0; | |
| text-align: left; | |
| padding: 10px 10px 0 10px; | |
| line-height: normal; | |
| } | |
| .jackbox-tooltip { | |
| position: absolute; | |
| display: inline-block; | |
| pointer-events: none; | |
| -webkit-border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| border-radius: 8px; | |
| border: 1px solid #FFF; | |
| border-bottom: 0; | |
| background: #f5f5f5; | |
| background: -moz-linear-gradient(top, #f5f5f5 0, #e5e5e5 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e5e5e5)); | |
| background: -webkit-linear-gradient(top, #f5f5f5 0, #e5e5e5 100%); | |
| background: -o-linear-gradient(top, #f5f5f5 0, #e5e5e5 100%); | |
| background: -ms-linear-gradient(top, #f5f5f5 0, #e5e5e5 100%); | |
| background: linear-gradient(to bottom, #f5f5f5 0, #e5e5e5 100%); | |
| -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
| -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
| -ms-filter: "alpha(opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -moz-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -o-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| -ms-transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| transition: all .6s cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| } | |
| .jackbox-tooltip p { | |
| font: 14px "Mako", sans-serif; | |
| line-height: normal; | |
| white-space: nowrap; | |
| padding: 6px 10px 7px 10px; | |
| margin: 0; | |
| color: #444; | |
| text-shadow: 1px 1px 0 #FFF; | |
| } | |
| .jackbox-tooltip p:after { | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| border-top: 10px solid #e5e5e5; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 65%} | |
| @media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolution:192dpi), only screen and (min-resolution:2dppx) { | |
| .jackbox-hover-magnify { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-hover-play { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| .jackbox-hover-document { | |
| background-image: url(../img/graphics/retina/[email protected]); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment