ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-07 11:26:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] In-progress on adding branded per-app screens

Browse Source 
open #164
CSS, markup;
This commit is contained in:
Charles Hacskaylo 2016-02-22 15:44:57 -08:00
parent 5d8efebc55
commit 31a983966b
4 changed files with 65 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -33,13 +33,18 @@
mct.run();
});
</script>
<link rel="stylesheet" href="platform/commonUI/general/res/css/startup.css">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" href="platform/commonUI/general/res/images/favicons/favicon.ico">
</head>
<body class="user-environ" ng-view>
<body class="user-environ">
<div class="l-logo-holder s-logo-holder">
<div class="l-logo s-logo s-logo-nasa"></div>
<div class="l-logo l-logo-app s-logo s-logo-openmctweb"></div>
</div>
<div ng-view></div>
</body>
</html>

41
platform/commonUI/general/res/sass/_about.scss
View File

@ -21,63 +21,30 @@
*****************************************************************************/
// General About dialog styling
@import "logo-and-bg";
.l-about {
// Layout
&.abs {
// top: 20px;
overflow: auto;
}
$contentH: 200px;
.l-logo-holder {
position: relative;
height: 45%;
.l-logo {
$w: 5%;
position: absolute;
&.l-logo-app {
// @include test(blue);
top: 0; right: 15%; bottom: 0; left: 15%;
}
&.s-logo-nasa {
// @include test(red);
$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;
}
}
}
.l-content {
// @include test();
position: relative;
margin-top: $interiorMarginLg;
}
}
.s-about {
// Styling
line-height: 120%;
a {
color: $colorAboutLink;
}
.s-description,
.s-info {
// font-size: 0.8em;
}
.s-logo-holder {
background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web.
background-size: cover;
}
.s-logo {
// @include txtShdwLarge(); // text-shadow doesn't work for svg
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.s-logo-openmctweb {
background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
}
.s-btn {
line-height: 2em;
}
@ -90,10 +57,6 @@
}
em {
color: pushBack($colorBodyFg, 20%);
// margin-left: 2em;
&:first-child {
// margin-left: 0;
}
}
h3 {
font-size: 1.25em;

30
platform/commonUI/general/res/sass/_logo-and-bg.scss Normal file
View File

@ -0,0 +1,30 @@
.l-logo-holder {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
.l-logo {
$w: 5%;
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;
}
}
}
.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');
}

26
platform/commonUI/general/res/sass/startup.scss Normal file
View File

@ -0,0 +1,26 @@
@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');
}