/* Some not-so-obvious classes and ID's: .page-blocked-element --- the element that should have a modal cover #page-blocker --- the modal cover .page-blocker-spacer --- spacer element for confirmation messages (inserted into .page-blocked-element), since the message itself is in a modal cover and thus wouldn't cause elements to shift .read-only --- added to the when the page is in a read-only state */ .page-blocked-element { position: relative; display: block; /* FireFox bug */ } .page-blocked-element .page-blocker-spacer { margin-bottom: 20px; } .page-blocked-element .bottom-page-blocker-spacer { margin-top: 20px; } #page-blocker { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; width: auto; height: auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* This is a 1px transparent gif. In IE 8, 9, and 10, the blocking div is not rendered if it has a transparent background */ background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } #page-blocker .confirmation-message { background-color: #444; color: #fff; font-size: 18px; font-weight: bold; padding: 10px; margin-top: 20px; } #page-blocker .confirmation-message .buttons { position: relative; top: -4px; float: right; } #page-blocker .confirmation-message.bottom-confirmation-message { position: absolute; bottom: 0; left: 0; right: 0; width: auto; } #page-blocker .confirmation-message.bottom-confirmation-message .buttons { position: static; } .read-only #main-content-right { padding-top: 0px; background-color: #fff; } .read-only #main-content-right .page-blocker-spacer { background-color: #d9d9d9; } .page-blocked-element .muted { display: none !important; } .page-blocked-element h2 { background: #fff; color: #333; margin-top: 3px; margin-bottom: 0; filter: none !important; } .page-blocked-element h2 > .sub-header { color: #777; } .page-blocked-element .widget-wrapper { border: none; margin-top: 0; background: transparent; } .page-blocked-element .widget-wrapper > h4 { background: #fff; color: #333; margin-bottom: 0; } .page-blocked-element .widget-wrapper > .widget-content { padding-top: 0; padding-bottom: 0; } .page-blocked-element input[type=text], .page-blocked-element select { border: solid 1px #eee; border-radius: 4px; } .page-blocked-element textarea, .page-blocked-element select[multiple] { display: none !important; } .page-blocked-element .textarea-replacer { white-space: pre-wrap; border: solid 1px #eee; border-radius: 4px; padding: 5px; margin: 5px; min-height: 1em; } .page-blocked-element .non-read-only { display: none !important; } .page-blocked-element a { color: #aaa !important; } .page-blocked-element input[type=submit], .page-blocked-element input[type=button], .page-blocked-element button { -moz-opacity: 0.50; opacity: 0.50; } .page-blocked-element #page-blocker input[type=submit], .page-blocked-element #page-blocker input[type=button], .page-blocked-element #page-blocker button { -moz-opacity: 1; opacity: 1; margin-right: 5px; } .page-blocked-element .select-replacer { display: inline-block; width: auto; border: solid 1px #eee; border-radius: 4px; padding: 5px; margin: 5px; } .page-blocked-element .select-replacer .option-replacer, .page-blocked-element .select-replacer .optgroup-replacer .optgroup-replacer-label { padding: 3px 2px; } .page-blocked-element .select-replacer .optgroup-replacer .optgroup-replacer-label { font-weight: bold; } .page-blocked-element .select-replacer .optgroup-replacer .option-replacer { margin-left: 15px; }