diff --git a/css/setup.css b/css/setup.css index f8f59f235..acd3caf0c 100644 --- a/css/setup.css +++ b/css/setup.css @@ -1,130 +1,208 @@ body { - background-color: #eee; - margin: 0; - padding: 0; - font-size: 10pt; - overflow-y: auto; + background-color: #eee; + color: #1a202c; + margin: 0; + padding: 0; + font-size: 10pt; + font-family: Tahoma, Verdana, Arial, Helvetica; + overflow-y: auto; +} +a { + color: #1c94c4; + text-decoration: none; +} +a:hover { + color: #ea7d1e; } #header { - width: 600px; - margin-left: auto; - margin-right: auto; - margin-top: 50px; - padding: 20px; - background: #f6f6f1; - height: 54px; - border-top: 1px solid #000; - border-left: 1px solid #000; - border-right: 1px solid #000; + width: 600px; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + padding: 20px; + background-color: #fff; + height: 54px; + border: 3px solid #cbd2d9; + border-bottom: none; } #header img { - border: 0; - vertical-align: middle; - margin-right: 20px; + border: 0; + vertical-align: middle; + margin-right: 20px; } #header h1 { - vertical-align: middle; - height: 54px; - noline-height: 54px; - margin: 0; + vertical-align: middle; + height: 54px; + noline-height: 54px; + margin: 0; } #setup { - width: 600px; - margin-left: auto; - margin-right: auto; - padding: 20px; - background-color: #fff; - border-left: 1px solid #000; - border-right: 1px solid #000; - border-bottom: 1px solid #000; + width: 600px; + margin-left: auto; + margin-right: auto; + padding: 20px; + background-color: #fff; + border: 3px solid #cbd2d9; + border-top: none; } .center { - text-align: center; + text-align: center; } - h1 { - color: #555555; - font-size: 16pt; + color: #555; + font-size: 16pt; } h2 { - color: #000; - font-size: 14pt; + color: #1a202c; + font-size: 14pt; } h3 { - color: #1C94C4; - font-size: 12pt; - font-weight: bold; + color: #1c94c4; + font-size: 12pt; + font-weight: bold; } .next { - width: 100%; - text-align: right; + width: 100%; + text-align: right; } .v-spacer { - padding-top: 1em; + padding-top: 1em; } button { - margin-top: 1em; - padding-left: 1em; - padding-right: 1em; + margin-top: 1em; + padding-left: 1em; + padding-right: 1em; } p.info { - padding-left: 50px; - background: url(../images/info-mid.png) no-repeat left -5px; - min-height: 48px; + padding-left: 50px; + background: url(../images/info-mid.png) no-repeat left -5px; + min-height: 48px; } p.ok { - padding-left: 50px; - background: url(../images/clean-mid.png) no-repeat left -8px; - min-height: 48px; + padding-left: 50px; + background: url(../images/clean-mid.png) no-repeat left -8px; + min-height: 48px; } p.warning { - padding-left: 50px; - background: url(../images/messagebox_warning-mid.png) no-repeat left -5px; - min-height: 48px; + padding-left: 50px; + background: url(../images/messagebox_warning-mid.png) no-repeat left -5px; + min-height: 48px; } p.error { - padding-left: 50px; - background: url(../images/stop-mid.png) no-repeat left -5px; - min-height: 48px; + padding-left: 50px; + background: url(../images/stop-mid.png) no-repeat left -5px; + min-height: 48px; } td.label { - text-align: left; + text-align: left; } label.read-only { - color: #666; - cursor: text; + color: #666; + cursor: text; } td.input { - text-align: left; + text-align: left; } table.formTable { - border: 0; - cellpadding: 2px; - cellspacing: 0; + border: 0; + cellpadding: 2px; + cellspacing: 0; } .wizlabel, .wizinput { - color: #000; - font-size: 10pt; + color: #000; + font-size: 10pt; } .wizhelp { - color: #333; - font-size: 8pt; + color: #333; + font-size: 8pt; } #progress { - border:1px solid #000000; - width: 180px; - height: 20px; - line-height: 20px; - text-align: center; - margin: 5px; + border: none; + width: 210px; + height: 26px; + line-height: 26px; + text-align: center; + margin: 5px; + box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; + border-radius: 2px; + background-color: #edf2f7 !important; +} +#progress .progress { + transition: background-color 0.2s ease-in-out; +} +#progress .progress.progress-error { + background-color: #e53e3e !important; } h3.clickable { - background: url(../images/plus.gif) no-repeat left; - padding-left:16px; - cursor: hand; + background: url(../images/plus.gif) no-repeat left; + padding-left: 16px; + cursor: hand; } h3.clickable.open { - background: url(../images/minus.gif) no-repeat left; - padding-left:16px; - cursor: hand; -} \ No newline at end of file + background: url(../images/minus.gif) no-repeat left; + padding-left: 16px; + cursor: hand; +} +.message { + color: #1a202c; + background-color: #f7fafc; + border-left: 4px solid #4a5568; + padding: 10px; +} +.message.message-valid { + color: #276749; + background-color: #f0fff4; + border-color: #48bb78; +} +.message.message-warning { + color: #c05621; + background-color: #fffaf0; + border-color: #ed8936; +} +.message.message-error { + color: #c53030; + background-color: #fff5f5; + border-color: #e53e3e; +} +.message > .message-title { + font-weight: bold; + margin-right: 5px; +} +.text-valid { + color: #276749; +} +.text-warning { + color: #c05621; +} +.text-error { + color: #c53030; +} +fieldset { + border: none; + padding: 0; + margin: 0; +} +fieldset > legend { + font-size: 12pt; + margin-top: 25px; + margin-bottom: 7px; + width: 100%; + border-bottom: 1px solid #718096; + padding-bottom: 7px; +} +#details > .message { + margin-bottom: 6px; +} +#details > .message:last-of-type { + margin-bottom: 0; +} +.module-selection-banner img { + max-height: 48px; +} +.module-selection-body { + height: 28em; + overflow: auto; + box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; + background-color: #f7fafc; + padding: 10px; +} diff --git a/css/setup.scss b/css/setup.scss new file mode 100644 index 000000000..83321bc25 --- /dev/null +++ b/css/setup.scss @@ -0,0 +1,242 @@ +$message-default-border-color: #4A5568 !default; +$message-default-text-color: #1A202C !default; +$message-default-background-color: #F7FAFC !default; + +$message-valid-border-color: #48BB78 !default; +$message-valid-text-color: #276749 !default; +$message-valid-background-color: #F0FFF4 !default; + +$message-warning-border-color: #ED8936 !default; +$message-warning-text-color: #C05621 !default; +$message-warning-background-color: #FFFAF0 !default; + +$message-error-border-color: #E53E3E !default; +$message-error-text-color: #C53030 !default; +$message-error-background-color: #FFF5F5 !default; + +$content-border-color: #CBD2D9 !default; +$default-font-color: #1A202C !default; +$legend-border-color: #718096 !default; +$link-default-color: #1c94c4 !default; +$link-hover-color: #EA7D1E !default; +body { + background-color: #eee; + color: $default-font-color; + margin: 0; + padding: 0; + font-size: 10pt; + font-family: Tahoma, Verdana, Arial, Helvetica; + overflow-y: auto; +} +a{ + color: $link-default-color; + text-decoration: none; + &:hover{ + color: $link-hover-color; + } +} +#header { + width: 600px; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + padding: 20px; + background-color: #fff; + height: 54px; + border: 3px solid $content-border-color; + border-bottom: none; +} +#header img { + border: 0; + vertical-align: middle; + margin-right: 20px; +} +#header h1 { + vertical-align: middle; + height: 54px; + noline-height: 54px; + margin: 0; +} +#setup { + width: 600px; + margin-left: auto; + margin-right: auto; + padding: 20px; + background-color: #fff; + border: 3px solid $content-border-color; + border-top: none; +} +.center { + text-align: center; +} + +h1 { + color: #555555; + font-size: 16pt; +} +h2 { + color: $default-font-color; + font-size: 14pt; +} +h3 { + color: #1C94C4; + font-size: 12pt; + font-weight: bold; +} +.next { + width: 100%; + text-align: right; +} +.v-spacer { + padding-top: 1em; +} +button { + margin-top: 1em; + padding-left: 1em; + padding-right: 1em; +} +p.info { + padding-left: 50px; + background: url(../images/info-mid.png) no-repeat left -5px; + min-height: 48px; +} +p.ok { + padding-left: 50px; + background: url(../images/clean-mid.png) no-repeat left -8px; + min-height: 48px; +} +p.warning { + padding-left: 50px; + background: url(../images/messagebox_warning-mid.png) no-repeat left -5px; + min-height: 48px; +} +p.error { + padding-left: 50px; + background: url(../images/stop-mid.png) no-repeat left -5px; + min-height: 48px; +} +td.label { + text-align: left; +} +label.read-only { + color: #666; + cursor: text; +} +td.input { + text-align: left; +} +table.formTable { + border: 0; + cellpadding: 2px; + cellspacing: 0; +} +.wizlabel, .wizinput { + color: #000; + font-size: 10pt; +} +.wizhelp { + color: #333; + font-size: 8pt; +} +#progress { + border: none; + width: 210px; + height: 26px; + line-height: 26px; + text-align: center; + margin: 5px; + box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.06) !important; + border-radius: 2px; + background-color: #EDF2F7 !important; + + .progress{ + transition: background-color 0.2s ease-in-out; + &.progress-error{ + background-color: #E53E3E !important; + } + } +} +h3.clickable { + background: url(../images/plus.gif) no-repeat left; + padding-left:16px; + cursor: hand; +} +h3.clickable.open { + background: url(../images/minus.gif) no-repeat left; + padding-left:16px; + cursor: hand; +} +.message{ + color: $message-default-text-color; + background-color: $message-default-background-color; + border-left: 4px solid $message-default-border-color; + padding: 10px; + + &.message-valid{ + color: $message-valid-text-color; + background-color: $message-valid-background-color; + border-color: $message-valid-border-color; + } + &.message-warning{ + color: $message-warning-text-color; + background-color: $message-warning-background-color; + border-color: $message-warning-border-color; + } + &.message-error{ + color: $message-error-text-color; + background-color: $message-error-background-color; + border-color: $message-error-border-color; + } + >.message-title { + font-weight: bold; + margin-right: 5px; + } +} +.text-valid{ + color:$message-valid-text-color +} +.text-warning{ + color:$message-warning-text-color +} +.text-error{ + color:$message-error-text-color +} + +fieldset{ + border: none; + padding: 0; + margin: 0; + + > legend{ + font-size: 12pt; + margin-top: 25px; + margin-bottom: 7px; + width: 100%; + border-bottom: 1px solid#718096; + padding-bottom: 7px; + } +} + +#details{ + >.message{ + margin-bottom: 6px; + + &:last-of-type{ + margin-bottom: 0; + } + } +} +.module-selection-banner{ + img{ + max-height: 48px; + } +} +.module-selection-body{ + height: 28em; + overflow: auto; + box-shadow: inset 0 2px 4px 0 + rgba(0,0,0,.06) !important; + background-color: #F7FAFC; + padding: 10px; +} + diff --git a/setup/setup.js b/setup/setup.js index 77b1f14bb..b83719322 100644 --- a/setup/setup.js +++ b/setup/setup.js @@ -10,7 +10,7 @@ function WizardAsyncAction(sActionCode, oParams, OnErrorFunction) $(document).ajaxError(function(event, request, settings) { // update progressbar // not calling a dedicated plugin method as it is overdated and will be replaced soon - $("#progress .progress").css("background-image", "none"); + $("#progress .progress").addClass('progress-error'); $('#async_action').html('
'+request.responseText+'').show(); if (ErrorFn) { diff --git a/setup/setuppage.class.inc.php b/setup/setuppage.class.inc.php index 0b85c2ed5..e567e8343 100644 --- a/setup/setuppage.class.inc.php +++ b/setup/setuppage.class.inc.php @@ -42,7 +42,7 @@ class SetupPage extends NiceWebPage parent::__construct($sTitle); $this->add_linked_script("../js/jquery.blockUI.js"); $this->add_linked_script("../setup/setup.js"); - $this->add_linked_stylesheet("../css/setup.css"); + $this->add_saas("css/setup.scss"); } /** @@ -77,19 +77,19 @@ class SetupPage extends NiceWebPage public function ok($sText) { - $this->add("
$sText
\n"); + $this->add(""); $this->log_ok($sText); } public function warning($sText) { - $this->add("$sText
\n"); + $this->add(""); $this->log_warning($sText); } public function error($sText) { - $this->add("$sText
\n"); + $this->add(""); $this->log_error($sText); } diff --git a/setup/setuputils.class.inc.php b/setup/setuputils.class.inc.php index 513f0870a..3260f4713 100644 --- a/setup/setuputils.class.inc.php +++ b/setup/setuputils.class.inc.php @@ -958,7 +958,7 @@ class SetupUtils $oPage->add(''); $oPage->add(''); - $oPage->add('