/* Created on : 10-Oct-2017, 1:11:41 PM Author : ncrause */ #modal_content_overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; color: #555; opacity: 0.5; z-index: 16383; } .modal_container { box-sizing: border-box; position: fixed; top: 0; left: 0; padding: 0; width: calc(100vw - 10px); height: calc(100vh - 10px); margin: 5px; box-shadow: 0 0 10px #222; background: transparent; } .modal_container .subordinate_overlay { box-sizing: border-box; position: absolute; top: 0; left: 0; padding: 0; width: 100%; height: 100%; display: none; background: rgba(0, 0, 0, 0.5); z-index: 1; } .modal_container.small_dialog { width: 400px; max-width: calc(100vw - 10px); } .modal_container.medium_dialog { width: 600px; max-width: calc(100vw - 10px); } .modal_container.large_dialog { width: 800px; max-width: calc(100vw - 10px); } .modal_container.huge_dialog { width: 960px; max-width: calc(100vw - 10px); } .modal_container.massive_dialog { width: 1010px; max-width: calc(100vw - 10px); } .modal_container.jumbo_dialog { width: 1200px; max-width: calc(100vw - 10px); } .modal_container.alert, .modal_container.alert_dialog { width: auto; height: auto; min-width: 300px; max-width: calc(100vw - 10px); /*min-height: 200px;*/ top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .modal_container.alert_dialog .tools { display: none; } .modal_container.alert .modal_body, .modal_container.alert_dialog .modal_body { padding: 10px 40px 52px 40px; } .modal_container > header { box-sizing: border-box; background-color: #454545; background-image: -webkit-linear-gradient(top, #454545, #111); background-image: -moz-linear-gradient(top, #454545, #111); background-image: -ms-linear-gradient(top, #454545, #111); background-image: -o-linear-gradient(top, #454545, #111); background-image: linear-gradient(top, #454545, #111); padding: 10px; overflow: hidden; /*margin: -1px -1px 0 -1px;*/ border-top-left-radius: 3px; border-top-right-radius: 3px; position: absolute; top: 0; left: 0; width: 100%; } .modal_container > header > h1 { box-sizing: border-box; font-size: 17px; font-family: "Droid Serif", Georgia; color: #eee; font-weight: 200; float: left; margin: 0; padding: 0; line-height: 22px; } .modal_container > header > .tools { box-sizing: border-box; float: right; margin: 0; padding: 0; line-height: normal; } .modal_container > header > .tools > li { display: inline-block; margin-left: 8px; } .modal_container .dialog_button.icon { background-position: 5px center; background-repeat: no-repeat; } .modal_container .dialog_button.transparent { background-color: transparent; } .modal_container .dialog_button.white_question_icon { background-image: url('/images/icons/white_question.png'); } .modal_container .dialog_button.bare { border: none; background: transparent; padding: 0; } .modal_container .dialog_button.bare[data-dialog-action="close"] { font-size: 26px; line-height: 0.75em !important; vertical-align: middle; } .modal_container > header .dialog_button { color: #eee; font-size: 11px; border-color: #666; min-width: 0; } .modal_container > header .dialog_button:hover { border-color: #aaa; text-decoration: none; } .modal_container > header .dialog_button.icon { padding: 2px 5px 2px 18px; } .modal_container > main { box-sizing: border-box; background-color: #f5f5f5; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #333; /* position: absolute; top: 42px; left: 0;*/ margin-top: 42px; width: 100%; height: calc(100% - 42px); padding: 8px 5px 10px 5px; border-top: 1px solid #d5d5d5; } .modal_container > main > section.modal_body { /* DO NOT SECTION POSITION: ANYTHING HERE - it will cause the asterion_dialog_submit to be misplaced, as it's positioning is dependent on
being the position starting point */ box-sizing: border-box; height: calc(100% - 52px); /* 100% - the dialog submit "footer" */ font-size: 14px; color: #555; font-family: Arial, sans-serif; line-height: 1.3em; overflow: auto; } .modal_container > main > section.modal_body * { box-sizing: border-box; } .modal_container > main > section.modal_body p { line-height: 22px; font-family: 'Droid Serif', Georgia; margin: 10px 25px; } .modal_container .asterion_dialog_submit, .modal_container > footer { box-sizing: border-box; position: absolute; /* bottom: 0; left: 0; width: 100%;*/ bottom: 1px; left: 1px; width: calc(100% - 2px); max-height: 52px; /* so we don't overlap the body */ padding: 10px 15px; border-top: 1px dotted #777; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; /* border-left: 1px solid #444; border-right: 1px solid #444; box-shadow: 0 7px 10px #444;*/ background-color: #fff; } .modal_body fieldset { margin: 0; padding: 10px 20px; position: relative; } .modal_body h3, .modal_body h4 { clear: both; color: #555; font-weight: 200px; position: relative; font-family: "Droid Serif", Georgia; background: none; } .modal_body h3 { padding: 5px 10px 3px 10px; margin: 10px 20px 10px 15px; font-size: 18px; border-bottom: 1px dotted #aaa; } .modal_body .radio_group, .modal_body .input_field, .modal_body .file_field, .modal_body .select_field, .modal_body .checkbox_field, .modal_body .radio_field, .modal_body .static_field, .modal_body .date_field { margin: 0px 15px 20px 0 } .modal_body label { display: block; font-weight: bold; padding-bottom: 3px; margin-bottom: 0; } .modal_body .radio_field label, .modal_body .checkbox_field label { display: inline-block; font-weight: normal; padding: 0px 5px; float: none; width: auto; text-align: left; } .modal_body input, .modal_body textarea, .modal_body select { background-color: #fff; color: #555; font-size: 14px; padding: 5px; border: 1px solid #aaa; border-radius: 3px; } .modal_body input[disabled], .modal_body textarea[disabled], .modal_body select[disabled] { background-color: #ddd; color: #999; } .modal_body .modal_form_group { margin-bottom: 5px; } .small_dialog .modal_body input[type="text"], .small_dialog .modal_body input[type="password"], .small_dialog .modal_body select, .alert_dialog .modal_body input[type="text"], .alert_dialog .modal_body input[type="password"], .alert_dialog .modal_body select { width: 100%; } .modal_container .dialog_button, .modal_container .dialog_button:active { float: right; padding: 5px 15px; min-width: 110px; margin: 0 0 0 10px; display: inline-block; } .modal_container .dialog_button { cursor: pointer; background-color: #aaa; border: 1px solid #aaa; color: white; text-align: center; border-radius: 3px; font-weight: normal; } .modal_container .dialog_button.submit, .modal_container .dialog_button.ok, .modal_container .dialog_button.done { background-color: #0f9d50; border: 1px solid #0f9d50; } .modal_container .dialog_button.submit:hover, .modal_container .dialog_button.ok:hover, .modal_container .dialog_button.done:hover { background-color: #0c7e40; border: 1px solid #0c7e40; } .modal_container .dialog_button.cancel, .modal_container .dialog_button.red_button, .modal_container .dialog_button.close, .modal_container .dialog_button.revert { background-color: #dd4444; border: 1px solid #dd4444; float: none; margin-left: 0; } .modal_container .dialog_button.cancel:hover, .modal_container .dialog_button.red_button:hover, .modal_container .dialog_button.close:hover, .modal_container .dialog_button.revert:hover { background-color: #b33737; border: 1px solid #b33737; } .modal_footer_buttonbar { text-align: right; } .modal_footer_buttonbar .dialog_button { float: none !important; margin-left: 10px !important; } .modal_body .modal_text_success { color: #0c7e40 !important; } .modal_body .modal_text_danger { color: #b33737 !important; } .modal_body .modal_text_muted { color: #aaa !important; } .modal_body table { width: 100%; border-collapse: collapse; } .modal_body table td, .modal_body table th { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px 10px; } .modal_body table.modal_table_striped tbody tr:nth-of-type(2n) { background-color: #eee; } .modal_body .modal_tabbing { height: 99%; /* sigh!!! */ } .modal_body ul.modal_tabs { list-style: none; padding: 0; font-size: 0; line-height: 0; border-bottom: 1px solid #ddd; padding-left: 15px; } .modal_body ul.modal_tabs li { display: inline-block; padding: 5px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px; line-height: 20px; margin-bottom: -1px; border: 1px solid transparent; /*background: #eee;*/ } .modal_body ul.modal_tabs li.active { background: transparent; border-color: #ddd #ddd #f5f5f5; } .modal_body ul.modal_tabs li.active a { color: #333; } .modal_body ul.modal_tabs li:hover { border-color: #eee; } .modal_body .modal_tab_panels_container { height: calc(100% - 40px); overflow: auto; } .modal_body .modal_tab_panel { display: none; } .modal_body .modal_tab_panel.active { display: block; } .modal_container .modal_btn { line-height: 1; padding: 5px; border-radius: 3px; border: 1px solid #ddd; background: white; color: #333; display: inline-block; } .modal_container .modal_btn:hover { background-color: #ddd; text-decoration: none; } .modal_container .modal_btn[disabled] { opacity: 0.5; } .modal_container .modal_btn.modal_btn_success { background-color: #0f9d50; border-color: #0f9d50; color: white; } .modal_container .modal_btn.modal_btn_success:hover { background-color: #0c7e40; border-color: #0c7e40; } .modal_container .modal_btn.modal_btn_danger { background-color: #dd4444; border-color: #dd4444; color: white; } .modal_container .modal_btn.modal_btn_danger:hover { background-color: #b33737; border-color: #b33737; } .modal_container .modal_toolbar { background: #eee; padding: 5px 10px; margin-bottom: 5px; border-radius: 3px; } .modal_body form[disabled] * { opacity: 0.25; }