diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html
index 5113954105..fe19442f16 100644
--- a/platform/commonUI/about/res/templates/about-dialog.html
+++ b/platform/commonUI/about/res/templates/about-dialog.html
@@ -20,10 +20,7 @@
at runtime from the About dialog for additional information.
-->
-
+
OpenMCT Web
diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss
index 38c4c59b61..1e9abe70cf 100644
--- a/platform/commonUI/general/res/sass/_about.scss
+++ b/platform/commonUI/general/res/sass/_about.scss
@@ -28,7 +28,7 @@
overflow: auto;
}
$contentH: 200px;
- .l-logo-holder {
+ .l-splash {
position: relative;
height: 45%;
}
diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss
index c1701f7387..a048eb75d0 100644
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -19,26 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
-.disabled,
-a.disabled {
- opacity: $controlDisabledOpacity;
- pointer-events: none !important;
- cursor: default !important;
-}
-
-.incised {
- @include boxIncised(0.8);
- border-bottom: 1px solid rgba(#fff, 0.3);
-}
-
-.test-stripes {
- @include bgDiagonalStripes();
-}
-
-.test {
- @include test();
-}
-
@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes($animName) {
0% { opacity: $opacity0; }
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index cb0894c9fe..cc318eddce 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -112,6 +112,13 @@ mct-container {
padding: 1em;
}
+.disabled,
+a.disabled {
+ opacity: $controlDisabledOpacity;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
.align-right {
text-align: right;
}
@@ -158,4 +165,12 @@ mct-container {
.sep {
color: rgba(#fff, 0.2);
-}
\ No newline at end of file
+}
+
+.test-stripes {
+ @include bgDiagonalStripes();
+}
+
+.test {
+ @include test();
+}
diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss
index cb1e033919..136060cc9c 100644
--- a/platform/commonUI/general/res/sass/_logo-and-bg.scss
+++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss
@@ -1,30 +1,46 @@
-.l-logo-holder {
+.l-splash {
+ background-size: cover;
position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- .l-logo {
- $w: 5%;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ &:before,
+ &:after {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ content: '';
position: absolute;
- &.l-logo-app {
- top: 0; right: 15%; bottom: 0; left: 15%;
- }
- &.s-logo-nasa {
- $m: 10px;
- background-image: url($dirImgs + 'logo-nasa.svg');
- top: $m; right: auto; bottom: auto; left: $m;
- width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w;
- }
+ }
+
+ &:before {
+ // NASA logo
+ $w: 5%;
+ $m: 10px;
+ background-image: url($dirImgs + 'logo-nasa.svg');
+ top: $m;
+ right: auto;
+ bottom: auto;
+ left: $m;
+ height: auto;
+ width: $w * 2;
+ padding-bottom: $w;
+ padding-top: $w;
+ }
+
+ &:after {
+ // App logo
+ top: 0;
+ right: 15%;
+ bottom: 0;
+ left: 15%;
}
}
-.s-logo-holder {
- background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web.
- background-size: cover;
-}
-.s-logo {
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
-}
-.s-logo-openmctweb {
- background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
+.s-splash {
+ background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web.
+ &:after {
+ background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
+ }
}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_startup.scss b/platform/commonUI/general/res/sass/_startup.scss
new file mode 100644
index 0000000000..3124cd1c45
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_startup.scss
@@ -0,0 +1,47 @@
+@import "bourbon";
+$dirImgs: '../../../general/res/images/';
+@import "logo-and-bg";
+
+@mixin splashElem($m: 20%) {
+ top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
+
+}
+
+.l-splash-holder {
+ // Main outer holder.
+ @include transition-property(opacity);
+ @include transition-duration(500ms);
+ @include transition-timing-function(ease-in-out);
+ @include transition-delay(1s);
+ z-index: 10000;
+ opacity: 1;
+ &.fadeout {
+ opacity: 0;
+ pointer-events: none;
+ }
+ .l-splash {
+ // The splash element.
+ @include splashElem();
+ border-radius: 10px;
+ box-shadow: 0 5px 50px 25px rgba(#fff, 0.1);
+ }
+}
+
+@media only screen and (max-device-width: 767px) {
+ .l-splash-holder .l-splash {
+ @include splashElem(0);
+ border-radius: 0;
+ box-shadow: none;
+ }
+}
+
+@media only screen and (max-device-width: 767px) and (orientation: portrait) {
+ .l-splash-holder .l-splash {
+ &:before {
+ $w: 12%;
+ width: $w * 2;
+ padding-bottom: $w;
+ padding-top: $w;
+ }
+ }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/startup-open.scss b/platform/commonUI/general/res/sass/startup-open.scss
new file mode 100644
index 0000000000..0f13bf853d
--- /dev/null
+++ b/platform/commonUI/general/res/sass/startup-open.scss
@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@import "startup";
+
+.l-splash-holder {
+ background: #333;
+ position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ .s-splash {
+ background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web.
+ // &:before { // Use this to override the NASA logo. Could add a AMMOS logo along with NASA if desired. }
+ &:after {
+ // App logo
+ background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
+ }
+ }
+}
diff --git a/platform/commonUI/general/res/sass/startup.scss b/platform/commonUI/general/res/sass/startup.scss
deleted file mode 100644
index 4784926b20..0000000000
--- a/platform/commonUI/general/res/sass/startup.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "compass";
-@import "compass/css3";
-@import "constants";
-$dirImgs: '../../../general/res/images/';
-@import "logo-and-bg";
-
-body {
- background: black;
-}
-
-.s-logo-holder {
- @include transition-property(opacity);
- @include transition-duration(500ms);
- @include transition-timing-function(ease-in-out);
- background-image: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web.
- z-index: 1000;
- opacity: 1;
- &.fadeout {
- opacity: 0;
- pointer-events: none;
- }
-}
-
-.s-logo-openmctweb {
- background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
-}
diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js
index e9666f4f6d..8c38339531 100644
--- a/platform/commonUI/general/src/SplashScreenManager.js
+++ b/platform/commonUI/general/src/SplashScreenManager.js
@@ -32,7 +32,8 @@ define([
function SplashScreenManager($document) {
var splash;
$document = $document[0];
- splash = $document.querySelectorAll('.s-logo-holder')[0];
+ splash = $document.querySelectorAll('.l-splash-holder')[0];
+ console.log(splash);
if (!splash) {
return;
}