|
|
/* Global */
.jBox-wrapper { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.jBox-title, .jBox-content, .jBox-container { position: relative; word-break: break-word; }
.jBox-container { background: #fff; }
.jBox-content { padding: 8px 10px; overflow: auto; }
/* jBox: Tooltip */
.jBox-Tooltip .jBox-container, .jBox-Mouse .jBox-container { border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.jBox-Tooltip .jBox-title, .jBox-Mouse .jBox-title { padding: 8px 10px 0; font-weight: bold; }
.jBox-hasTitle.jBox-Tooltip .jBox-content, .jBox-hasTitle.jBox-Mouse .jBox-content { padding-top: 5px; }
/* Pointer */
.jBox-pointer { position: absolute; overflow: hidden; }
.jBox-pointer-top { top: 0; } .jBox-pointer-bottom { bottom: 0; } .jBox-pointer-left { left: 0; } .jBox-pointer-right { right: 0; }
.jBox-pointer-top, .jBox-pointer-bottom { width: 30px; height: 12px; }
.jBox-pointer-left, .jBox-pointer-right { width: 12px; height: 30px; }
.jBox-pointer:after { content: ''; width: 20px; height: 20px; position: absolute; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.jBox-pointer-top:after { left: 5px; top: 6px; box-shadow: -1px -1px 4px rgba(0, 0, 0, .2); }
.jBox-pointer-right:after { top: 5px; right: 6px; box-shadow: 1px -1px 4px rgba(0, 0, 0, .2); }
.jBox-pointer-bottom:after { left: 5px; bottom: 6px; box-shadow: 1px 1px 4px rgba(0, 0, 0, .2); }
.jBox-pointer-left:after { top: 5px; left: 6px; box-shadow: -1px 1px 4px rgba(0, 0, 0, .2); }
/* jBox: Modal */
.jBox-Modal .jBox-container { border-radius: 3px; box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); }
.jBox-Modal .jBox-content { padding: 12px 15px; }
.jBox-Modal .jBox-title { border-radius: 3px 3px 0 0; padding: 10px 15px; background: #f4f5f6; border-bottom: 1px solid #ddd; text-shadow: 0 1px 0 #fff; }
.jBox-Modal.jBox-closeButton-title .jBox-title { padding-right: 65px; }
.jBox-Modal.jBox-closeButton-box:before { box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); }
/* jBox: Notice */
.jBox-Notice { -webkit-transition: margin .2s; transition: margin .2s; }
.jBox-Notice .jBox-container { border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, .2); color: #fff; text-shadow: 0 -1px 0 #000; background: #333; background-image: linear-gradient(to bottom, #444, #222); }
.jBox-Notice .jBox-content { border-radius: 3px; padding: 12px 20px; }
.jBox-Notice .jBox-title { padding: 8px 20px 0; font-weight: bold; }
.jBox-hasTitle.jBox-Notice .jBox-content { padding-top: 5px; }
.jBox-Notice-color .jBox-container { text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.jBox-Notice-gray .jBox-container { color: #666; text-shadow: 0 1px 0 #fff; background: #f4f4f4; background-image: linear-gradient(to bottom, #fafafa, #f0f0f0); }
.jBox-Notice-red .jBox-container { background: #b02222; background-image: linear-gradient(to bottom, #ee2222, #b02222); }
.jBox-Notice-green .jBox-container { background: #70a800; background-image: linear-gradient(to bottom, #95cc2a, #70a800); }
.jBox-Notice-blue .jBox-container { background: #2b91d9; background-image: linear-gradient(to bottom, #5abaff, #2b91d9); }
.jBox-Notice-yellow .jBox-container { color: #744700; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: #ffb11f; background-image: linear-gradient(to bottom, #ffd665, #ffb11f); }
/* Close button */
.jBox-closeButton { cursor: pointer; position: absolute; }
.jBox-closeButton:after { content: ''; position: absolute; width: 100%; height: 100%; background: center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPg0KPHBhdGggZD0iTTIyLjIsNGMwLjMsMC4zLDAuMywwLjgsMCwxLjFMMTYsMTEuNGMtMC4zLDAuMy0wLjMsMC44LDAsMS4xbDYuMyw2LjNjMC4zLDAuMywwLjMsMC44LDAsMS4xTDIwLDIyLjMNCgljLTAuMywwLjMtMC44LDAuMy0xLjEsMEwxMi41LDE2Yy0wLjMtMC4zLTAuOC0wLjMtMS4xLDBsLTYuMyw2LjNjLTAuMywwLjMtMC44LDAuMy0xLjEsMEwxLjcsMjBjLTAuMy0wLjMtMC4zLTAuOCwwLTEuMUw4LDEyLjYNCgljMC4zLTAuMywwLjMtMC44LDAtMS4xTDEuNyw1LjFDMS40LDQuOCwxLjQsNC4zLDEuNyw0TDQsMS43YzAuMy0wLjMsMC44LTAuMywxLjEsMEwxMS40LDhjMC4zLDAuMywwLjgsMC4zLDEuMSwwbDYuMy02LjMNCgljMC4zLTAuMywwLjgtMC4zLDEuMSwwTDIyLjIsNHoiLz4NCjwvc3ZnPg==); opacity: 0.25; }
.jBox-closeButton-box .jBox-closeButton:after { background-size: 11px; }
.jBox-closeButton-title .jBox-closeButton:after { background-size: 13px; }
.jBox-closeButton:hover:after { opacity: 0.4; }
.jBox-closeButton:active:after { opacity: 0.6; }
.jBox-closeButton-box .jBox-closeButton { top: -8px; right: -10px; width: 24px; height: 24px; background: #fff; border-radius: 50%; }
.jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton { background: #f4f5f6; }
.jBox-closeButton-title .jBox-closeButton { top: 0; right: 0; bottom: 0; width: 50px; }
.jBox-closeButton-box:before { content: ''; position: absolute; top: -8px; right: -10px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.jBox-pointerPosition-top.jBox-closeButton-box:before { top: 4px; }
.jBox-pointerPosition-right.jBox-closeButton-box:before { right: 2px; }
/* Overlay */
#jBox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; background-color: rgba(0, 0, 0, .6); }
/* Block scrolling */
body[class^="jBox-blockScroll-"], body[class*=" jBox-blockScroll-"] { overflow: hidden; }
/* Draggable */
.jBox-draggable { cursor: move; }
/* Spinner */
@keyframes jBoxLoading { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }
@-webkit-keyframes jBoxLoading { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }
.jBox-loading .jBox-content { min-height: 32px; min-width: 32px; }
.jBox-loading .jBox-container:before { content: 'Loading…'; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -10px; margin-left: -10px; text-align: center; }
.jBox-loading .jBox-container:not(:required):before { content: ''; border-radius: 50%; border: 2px solid rgba(0,0,0, 0.3); border-top-color: rgba(0,0,0, 0.6); -webkit-animation: jBoxLoading .6s linear infinite; animation: jBoxLoading .6s linear infinite; }
/* IE8 fixes */
.jBox-IE8.jBox-Tooltip .jBox-container, .jBox-IE8.jBox-Mouse .jBox-container { border: 1px solid #aaa; }
.jBox-IE8 .jBox-pointer:after { display: none; }
.jBox-IE8 .jBox-pointer { border: 0; background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNq01l0OwyAIAGAlvY+n8ZJ6Gk/EqqkNtf7ApCQ+LM34iuCmRUQzihjj6FH+kjWL8N4/Ph9GHpiTnC9SwDbhLGyvspSScc71KkOa/HpuuRhIK+psE2pjONouCQg7kBSEXUgC2tHo52mTTBpnaEATWlaYK6MrhIAaceWpOcsCrYp6FV4H/90zTWjUQ/gSevVQq0ecHqoOxWpYoO7p5O9ku2fnVtp7QAik2rsK3fnpWfjynJWpbw+1BkghurrYDjiCptg/4AxaYhJwBbEwDsiB2NgM5EIirAdKIDFGQSmU1+NaIPjJYt2I25vxT4ABAMhWvtle2YvmAAAAAElFTkSuQmCC); }
.jBox-IE8 .jBox-pointer-top { background-position: center top; } .jBox-IE8 .jBox-pointer-bottom { background-position: center bottom; } .jBox-IE8 .jBox-pointer-left { background-position: left center; } .jBox-IE8 .jBox-pointer-right { background-position: right center; }
.jBox-IE8.jBox-Modal .jBox-container { border: 3px solid #aaa; }
.jBox-IE8 .jBox-closeButton:after { font-family: Verdana, sans-serif; content: 'x'; text-align: center; font-size: 18px; }
|