From ac41ed7d64ef1426b07098862fb8e523b404e1ca Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 4 Sep 2015 16:39:16 -0700 Subject: [PATCH] [Frontend] IN-PROGRESS Theme changes continuing open #95 Splitter styles updated; Tree styles updated; --- .gitignore | 1 + example/imagery/src/ImageTelemetry.js | 9 +- .../commonUI/general/res/sass/COMPILE.scss | 1 + .../commonUI/general/res/sass/_mixins.scss | 46 +++-- .../general/res/sass/controls/_menus.scss | 10 +- .../general/res/sass/helpers/_splitter.scss | 24 +-- .../commonUI/general/res/sass/tree/_tree.scss | 25 +-- .../espresso/res/css/theme-espresso.css | 148 +++++++------- .../themes/espresso/res/sass/_constants.scss | 20 +- .../themes/snow/res/css/theme-snow.css | 185 +++++++++--------- .../themes/snow/res/sass/_constants.scss | 31 ++- .../themes/snow/res/sass/_controls.scss | 13 +- .../themes/snow/res/sass/_mixins.scss | 8 +- 13 files changed, 265 insertions(+), 256 deletions(-) create mode 100644 platform/commonUI/general/res/sass/COMPILE.scss diff --git a/.gitignore b/.gitignore index 6d8ee7e58b..26932aec64 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ *.DS_Store *.sass-cache +*COMPILE.css # Intellij project configuration files *.idea diff --git a/example/imagery/src/ImageTelemetry.js b/example/imagery/src/ImageTelemetry.js index 127b65deba..c0e1e2bd1d 100644 --- a/example/imagery/src/ImageTelemetry.js +++ b/example/imagery/src/ImageTelemetry.js @@ -31,10 +31,11 @@ define( var firstObservedTime = Date.now(), images = [ - "http://www.nasa.gov/393811main_Palomar_ao_bouchez_10s_after_impact_4x3_946-710.png", - "http://www.nasa.gov/393821main_Palomar_ao_bouchez_15s_after_impact_4x3_946-710.png", - "http://www.nasa.gov/images/content/393801main_CfhtVeillet2_4x3_516-387.jpg", - "http://www.nasa.gov/images/content/392790main_1024_768_GeminiNorth_NightBeforeImpact_946-710.jpg" + "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/01/comet_on_16_january_2015_navcam/15205508-1-eng-GB/Comet_on_16_January_2015_NavCam.jpg", + "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_7_august_a/14721226-1-eng-GB/Comet_on_7_August_a_node_full_image_2.jpg", + "http://http://resources0.news.com.au/images/2014/10/26/1227102/619948-e62d0d0c-5cb3-11e4-9c68-d403f5dcc36d.jpg", + "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_16_august_a/14735866-1-eng-GB/Comet_on_16_August_a_node_full_image_2.jpg", + "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/08/year_at_a_comet_may_2015/15549436-1-eng-GB/Year_at_a_comet_May_2015_node_full_image_2.jpg" ].map(function (url, index) { return { timestamp: firstObservedTime + 1000 * index, diff --git a/platform/commonUI/general/res/sass/COMPILE.scss b/platform/commonUI/general/res/sass/COMPILE.scss new file mode 100644 index 0000000000..8c0ed50ef8 --- /dev/null +++ b/platform/commonUI/general/res/sass/COMPILE.scss @@ -0,0 +1 @@ +// This file exists only to force compass to compile in this directory with watch . \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index a64549a51f..a5b6834187 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -205,8 +205,8 @@ } } &:not(.disabled):hover:before { - @include trans-prop-nice("border-color", 50ms); - border-color: $colorKey; + @include trans-prop-nice("border-color", 25ms); + border-color: $colorGrippyInteriorHover; } } @@ -237,12 +237,22 @@ border: 1px solid $c; } +@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) { + @if $sVal != 'none' { + @include box-shadow($sVal); + } +} + @mixin boxShdwSubtle($sVal: 0.2) { - @include box-shadow(rgba(black, $sVal) 0 1px 2px); + @if $sVal != 'none' { + @include box-shadow(rgba(black, $sVal) 0 1px 2px); + } } @mixin boxShdwLarge($sVal: 0.7) { - @include box-shadow(rgba(black, $sVal) 0 3px 10px); + @if $sVal != 'none' { + @include box-shadow(rgba(black, $sVal) 0 3px 10px); + } } @mixin outerGlow($color: #fff, $sVal: 0.3) { @@ -258,33 +268,41 @@ } @mixin txtShdwSubtle($sVal: 0.1) { - @include text-shadow(rgba(black, $sVal) 0 1px 2px); + @if $sVal != 'none' { + @include text-shadow(rgba(black, $sVal) 0 1px 2px); + } } @mixin txtShdwLarge($sVal: 0.7) { @include text-shadow(rgba(black, $sVal) 0 3px 7px); } -@function pullForward($c: $colorBodyBg, $p: 20%) { +@function pullForward($c, $p: 20%) { // For dark interfaces, lighter things come forward @return lighten($c, $p); } -@function pushBack($c: $colorBodyBg, $p: 20%) { +@function pushBack($c, $p: 20%) { // For dark interfaces, darker things move back @return darken($c, $p); } +@function percentToDecimal($p) { + @return $p / 100%; +} + +@function decimalToPercent($d) { + @return percentage($d); +} + /*********************************************** FORM ELEMENTS */ @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) { @include appearance(none); @include border-radius($controlCr); @include box-sizing(border-box); @include box-shadow(inset rgba(black, 0.65) 0 1px 4px); - // background: lighten($bg, 20%); background: rgba(#fff, 0.1); border: none; - //border-bottom: 1px solid rgba(#fff, 0.1); color: lighten($fg, 20%); outline: none; &.error { @@ -308,16 +326,6 @@ border-bottom: 1px solid lighten($bg, 10%); } -/* -@mixin invokeMenu($baseColor: $colorBodyFg) { - $c: $baseColor; - color: $c; - &:hover { - color: lighten($c, $ltGamma); - } -} -*/ - @mixin menuUlReset() { margin: 0; padding: 0; diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 67e854091f..203761092f 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -37,8 +37,8 @@ } &:after { - // Adds the downward facing arrow element - color: rgba($colorInvokeMenu, 0.2); + // Adds the downward facing 'context available / invoke menu' arrow element + color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); content: '\76'; display: inline-block; font-family: 'symbolsfont'; @@ -50,9 +50,9 @@ .title-label { font-size: 1rem; } - &:after { - color: rgba($colorInvokeMenu, 0.5); - } + //&:after { + // color: rgba($colorInvokeMenu, 0.5); + //} } .menu { diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss index f1adebce9a..3a344696ad 100644 --- a/platform/commonUI/general/res/sass/helpers/_splitter.scss +++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss @@ -20,18 +20,20 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .split-layout { - $b: lighten($colorBodyBg, 5%); + $b: pullForward($colorBodyBg, $contrastRatioPercent); $splitterD: 5px; - // TEMP VAlS - this will need to be redone when we implement a draggable splitter - $splitL: 85%; - $splitT: 70%; .splitter { background-color: $b; - @include box-shadow(rgba(black, 0.4) 0 0 3px); + @include boxShdw($splitterShdw); overflow: hidden; position: absolute; z-index: 1; + //@if $colorSplitterHover != 'none' { + &:hover { + background-color: $colorSplitterHover; + } + //} } &.horizontal { // Slides vertically up and down, splitting the element horizontally @@ -41,21 +43,17 @@ right: 0; &.top { bottom: auto; -// height: $splitT; } &.bottom { top: auto; -// height: 100% - $splitT; } } >.splitter { - @include controlGrippy($b, horizontal); + @include controlGrippy($colorSplitterInterior, horizontal); cursor: row-resize; left: 0; right: 0; width: auto; height: $splitterD; -// margin-top: ($splitterD + 2) * -1; // Controlled by splitter -// top: $splitT; // Controlled by splitter } } &.vertical { @@ -65,20 +63,16 @@ bottom: 0; &.left { right: auto; -// width: $splitL - 1%; // Controlled by splitter } &.right { left: auto; -// width: 100% - $splitL; // Controlled by splitter } } >.splitter { - @include controlGrippy($b, vertical); + @include controlGrippy($colorBodyBg, vertical); bottom: 0; cursor: col-resize; width: $splitterD; -// margin-left: ($splitterD + 2) * -1; // Controlled by splitter -// left: $splitL; // Controlled by splitter } } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 8a0c4c1e2a..17261cd136 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -22,6 +22,7 @@ ul.tree { @include menuUlReset(); + @include user-select(none); li { display: block; position: relative; @@ -45,6 +46,7 @@ ul.tree { position: relative; .view-control { + color: $colorItemTreeVC; display: inline-block; margin-left: $interiorMargin; font-size: 0.75em; @@ -53,7 +55,7 @@ ul.tree { // NOTE: [Mobile] Removed Hover on Mobile @include desktop { &:hover { - color: $colorItemTreeVCHover; + color: $colorItemTreeVCHover !important; } } } @@ -69,7 +71,7 @@ ul.tree { .type-icon { //@include absPosDefault(0, false); $d: $treeTypeIconH; // 16px is crisp size - @include txtShdwSubtle(0.6); + @include txtShdwSubtle($shdwItemTreeIcon); font-size: $d; color: $colorItemTreeIcon; left: $interiorMargin; @@ -124,14 +126,13 @@ ul.tree { } &.selected { - $c: #fff; - background: $colorKeySelectedBg; - color: $c; + background: $colorItemTreeSelectedBg; + color: $colorItemTreeSelectedFg; .view-control { - color: $colorItemTreeIcon; + color: $colorItemTreeSelectedVC; } .label .type-icon { - color: #fff; //$colorItemTreeIconHover; + color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover; } } @@ -139,11 +140,11 @@ ul.tree { // NOTE: [Mobile] Removed Hover on Mobile @include desktop { &:hover { - background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } + background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%); + color: pullForward($colorBodyFg, 20%); + //.context-trigger { + // display: block; + //} .icon { color: $colorItemTreeIconHover; } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 52ce4616b9..cb6e719737 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, * at runtime from the About dialog for additional information. *****************************************************************************/ /*********************************************** FORM ELEMENTS */ -/* -@mixin invokeMenu($baseColor: $colorBodyFg) { - $c: $baseColor; - color: $c; - &:hover { - color: lighten($c, $ltGamma); - } -} -*/ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -931,26 +922,29 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout .splitter { - background-color: #404040; + background-color: #454545; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; overflow: hidden; position: absolute; z-index: 1; } -/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */ + .split-layout .splitter:hover { + background-color: none; } +/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal { overflow: hidden; } - /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane { left: 0; right: 0; } - /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane.top { bottom: auto; } - /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane.bottom { top: auto; } /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */ @@ -980,7 +974,7 @@ mct-container { pointer-events: none; position: absolute; z-index: 2; - border-top: 1px dotted #1a1a1a; + border-top: 1px dotted #0d0d0d; top: 2px; left: 5px; right: 5px; } @@ -990,26 +984,26 @@ mct-container { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } -/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 61, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane { top: 0; bottom: 0; } - /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane.left { right: auto; } - /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane.right { left: auto; } -/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical > .splitter { bottom: 0; cursor: col-resize; @@ -1034,7 +1028,7 @@ mct-container { pointer-events: none; position: absolute; z-index: 2; - border-left: 1px dotted #1a1a1a; + border-left: 1px dotted #0d0d0d; left: 2px; bottom: 5px; top: 5px; } @@ -1044,21 +1038,21 @@ mct-container { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } -/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 80, ../../../../general/res/sass/helpers/_splitter.scss */ .browse-area .splitter { top: 34px; } -/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 84, ../../../../general/res/sass/helpers/_splitter.scss */ .edit-area .splitter { top: 0; } @@ -1998,10 +1992,10 @@ label.checkbox.custom { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; @@ -2149,9 +2143,6 @@ label.checkbox.custom { /* line 50, ../../../../general/res/sass/controls/_menus.scss */ .s-menu.create-btn .title-label { font-size: 1rem; } -/* line 53, ../../../../general/res/sass/controls/_menus.scss */ -.s-menu.create-btn:after { - color: rgba(255, 255, 255, 0.5); } /* line 58, ../../../../general/res/sass/controls/_menus.scss */ .s-menu .menu { left: 0; @@ -2197,7 +2188,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 324, ../../../../general/res/sass/_mixins.scss */ + /* line 332, ../../../../general/res/sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2702,7 +2693,7 @@ label.form-control.checkbox input { position: absolute; height: 100%; width: 100%; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .edit-main textarea.error { background: rgba(255, 0, 0, 0.5); } @@ -2745,7 +2736,7 @@ input[type="text"] { color: #cccccc; outline: none; padding: 0 3px; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ input[type="text"].error { background: rgba(255, 0, 0, 0.5); } /* line 29, ../../../../general/res/sass/forms/_text-input.scss */ @@ -2893,7 +2884,7 @@ input[type="text"] { max-height: 400px; overflow: auto; padding: 5px; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .channel-selector .treeview.error { background: rgba(255, 0, 0, 0.5); } /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ @@ -3050,7 +3041,7 @@ span.req { padding: 0 3px; background: #3b3b3b; border-bottom: 1px solid #4d4d4d; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .filter input.filter.error, .filter input.t-filter-input.error, .t-filter input.filter.error, @@ -4166,7 +4157,7 @@ span.req { ul.tree { margin: 0; padding: 0; } - /* line 324, ../../../../general/res/sass/_mixins.scss */ + /* line 332, ../../../../general/res/sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; @@ -4201,16 +4192,17 @@ ul.tree { /* line 47, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { + color: rgba(255, 255, 255, 0.3); display: inline-block; margin-left: 5px; font-size: 0.75em; width: 10px; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 55, ../../../../general/res/sass/tree/_tree.scss */ + /* line 56, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #ffc700; } } - /* line 61, ../../../../general/res/sass/tree/_tree.scss */ + /* line 62, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label, .search-result-item .label { display: block; @@ -4223,7 +4215,7 @@ ul.tree { width: auto; height: auto; line-height: 1.5rem; } - /* line 69, ../../../../general/res/sass/tree/_tree.scss */ + /* line 70, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon, .search-result-item .label .type-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; @@ -4237,14 +4229,14 @@ ul.tree { line-height: 100%; right: auto; width: 16px; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-alert { text-shadow: black 0 1px 2px; position: absolute; z-index: 2; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 89, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-alert { color: #ff3c00; @@ -4254,7 +4246,7 @@ ul.tree { width: 8px; top: 1px; right: -2px; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 95, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-link { color: #49dedb; @@ -4264,7 +4256,7 @@ ul.tree { width: 8px; left: -3px; bottom: 0px; } - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .title-label, .search-result-item .label .title-label { overflow: hidden; @@ -4280,67 +4272,59 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 113, ../../../../general/res/sass/tree/_tree.scss */ + /* line 114, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading, .search-result-item.loading { pointer-events: none; } - /* line 115, ../../../../general/res/sass/tree/_tree.scss */ + /* line 116, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .label, .search-result-item.loading .label { opacity: 0.5; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 118, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .label .title-label, .search-result-item.loading .label .title-label { font-style: italic; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .wait-spinner, .search-result-item.loading .wait-spinner { margin-left: 14px; } - /* line 126, ../../../../general/res/sass/tree/_tree.scss */ + /* line 127, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { - background: #005177; - color: #fff; } + background: #006080; + color: #cccccc; } /* line 130, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item.selected .view-control, - .search-result-item.selected .view-control { - color: #0099cc; } - /* line 133, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .label .type-icon, .search-result-item.selected .label .type-icon { - color: #fff; } + color: #cccccc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 141, ../../../../general/res/sass/tree/_tree.scss */ + /* line 138, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { - background: rgba(255, 255, 255, 0.1); + background: rgba(153, 153, 153, 0.1); color: #cccccc; } /* line 144, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item:not(.selected):hover .context-trigger, - .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 147, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .icon, .search-result-item:not(.selected):hover .icon { color: #33ccff; } } - /* line 154, ../../../../general/res/sass/tree/_tree.scss */ + /* line 151, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 158, ../../../../general/res/sass/tree/_tree.scss */ + /* line 155, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 164, ../../../../general/res/sass/tree/_tree.scss */ + /* line 161, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 173, ../../../../general/res/sass/tree/_tree.scss */ +/* line 170, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label { left: 15px; } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 835d76133e..28fb94f121 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -6,11 +6,12 @@ $colorKey: #0099cc; $colorKeySelectedBg: #005177; $colorKeyFg: #fff; -$contrastRatio: 7%; -$colorBtnBg: pullForward($colorBodyBg, $contrastRatio); +$contrastRatioPercent: 7%; +$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); $colorBtnFg: $colorBodyFg; $colorBtnIcon: $colorKey; $colorInvokeMenu: #fff; +$contrastInvokeMenuPercent: 20%; $colorAlt1: #ffc700; $colorAlert: #ff3c00; @@ -47,7 +48,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%); // Overlay $colorOvrBlocker: rgba(black, 0.7); -$colorOvrBg: $colorBodyBg; +$colorOvrBg: pullForward($colorBodyBg, 10%); $colorOvrFg: $colorBodyFg; // Items $colorItemBase: lighten($colorBodyBg, 5%); @@ -63,6 +64,17 @@ $tabularColorHeaderBorder: $colorBodyBg; // Tree $colorItemTreeIcon: $colorKey; $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); +$colorItemTreeFg: $colorBodyFg; +$colorItemTreeSelectedBg: pushBack($colorKey, 15%); +$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%); +$colorItemTreeVC: rgba(#fff, 0.3); +$colorItemTreeSelectedVC: $colorItemTreeVC; $colorItemTreeVCHover: $colorAlt1; +$shdwItemTreeIcon: 0.6; // Scrollbar -$scrollbarTrackColorBg: rgba(#000, 0.4); \ No newline at end of file +$scrollbarTrackColorBg: rgba(#000, 0.4); +// Splitter +$splitterShdw: rgba(black, 0.4) 0 0 3px; +$colorSplitterInterior: $colorBodyBg; +$colorSplitterHover: none; +$colorGrippyInteriorHover: $colorKey; \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index c036576283..1227a93b0a 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, * at runtime from the About dialog for additional information. *****************************************************************************/ /*********************************************** FORM ELEMENTS */ -/* -@mixin invokeMenu($baseColor: $colorBodyFg) { - $c: $baseColor; - color: $c; - &:hover { - color: lighten($c, $ltGamma); - } -} -*/ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -931,26 +922,26 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout .splitter { - background-color: white; - -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; - -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; - box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + background-color: #b3b3b3; overflow: hidden; position: absolute; z-index: 1; } -/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */ + .split-layout .splitter:hover { + background-color: #0099cc; } +/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal { overflow: hidden; } - /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane { left: 0; right: 0; } - /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane.top { bottom: auto; } - /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.horizontal .pane.bottom { top: auto; } /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */ @@ -990,26 +981,26 @@ mct-container { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - border-color: #0099cc; } -/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */ + border-color: #fff; } +/* line 61, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane { top: 0; bottom: 0; } - /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane.left { right: auto; } - /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */ + /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical .pane.right { left: auto; } -/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ .split-layout.vertical > .splitter { bottom: 0; cursor: col-resize; @@ -1044,21 +1035,21 @@ mct-container { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - border-color: #0099cc; } + border-color: #fff; } -/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 80, ../../../../general/res/sass/helpers/_splitter.scss */ .browse-area .splitter { top: 34px; } -/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ +/* line 84, ../../../../general/res/sass/helpers/_splitter.scss */ .edit-area .splitter { top: 0; } @@ -1271,7 +1262,7 @@ mct-container { color: gray; } /* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */ .l-breadcrumb .l-breadcrumb-item a:hover .icon { - color: #33ccff; } + color: #0099cc; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government @@ -1362,7 +1353,7 @@ mct-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; - background-color: #bfbfbf; + background-color: #b3b3b3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; @@ -1958,15 +1949,15 @@ label.checkbox.custom { -o-transition-property: "border-color"; -webkit-transition-property: "border-color"; transition-property: "border-color"; - -moz-transition-duration: 50ms; - -o-transition-duration: 50ms; - -webkit-transition-duration: 50ms; - transition-duration: 50ms; + -moz-transition-duration: 25ms; + -o-transition-duration: 25ms; + -webkit-transition-duration: 25ms; + transition-duration: 25ms; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - border-color: #0099cc; } + border-color: #fff; } /* line 319, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:before { top: 1px; @@ -2099,7 +2090,7 @@ label.checkbox.custom { margin-left: 3px; } /* line 39, ../../../../general/res/sass/controls/_menus.scss */ .s-menu:after { - color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.5); content: '\76'; display: inline-block; font-family: 'symbolsfont'; @@ -2109,9 +2100,6 @@ label.checkbox.custom { /* line 50, ../../../../general/res/sass/controls/_menus.scss */ .s-menu.create-btn .title-label { font-size: 1rem; } -/* line 53, ../../../../general/res/sass/controls/_menus.scss */ -.s-menu.create-btn:after { - color: rgba(255, 255, 255, 0.5); } /* line 58, ../../../../general/res/sass/controls/_menus.scss */ .s-menu .menu { left: 0; @@ -2147,7 +2135,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 324, ../../../../general/res/sass/_mixins.scss */ + /* line 332, ../../../../general/res/sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2642,7 +2630,7 @@ label.form-control.checkbox input { position: absolute; height: 100%; width: 100%; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .edit-main textarea.error { background: rgba(255, 0, 0, 0.5); } @@ -2685,7 +2673,7 @@ input[type="text"] { color: #999999; outline: none; padding: 0 3px; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ input[type="text"].error { background: rgba(255, 0, 0, 0.5); } /* line 29, ../../../../general/res/sass/forms/_text-input.scss */ @@ -2823,7 +2811,7 @@ input[type="text"] { max-height: 400px; overflow: auto; padding: 5px; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .channel-selector .treeview.error { background: rgba(255, 0, 0, 0.5); } /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ @@ -2980,7 +2968,7 @@ span.req { padding: 0 3px; background: white; border-bottom: 1px solid white; } - /* line 290, ../../../../general/res/sass/_mixins.scss */ + /* line 308, ../../../../general/res/sass/_mixins.scss */ .filter input.filter.error, .filter input.t-filter-input.error, .t-filter input.filter.error, @@ -4069,21 +4057,25 @@ span.req { /* line 23, ../../../../general/res/sass/tree/_tree.scss */ ul.tree { margin: 0; - padding: 0; } - /* line 324, ../../../../general/res/sass/_mixins.scss */ + padding: 0; + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } + /* line 332, ../../../../general/res/sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; padding: 0; } - /* line 25, ../../../../general/res/sass/tree/_tree.scss */ + /* line 26, ../../../../general/res/sass/tree/_tree.scss */ ul.tree li { display: block; position: relative; } - /* line 29, ../../../../general/res/sass/tree/_tree.scss */ + /* line 30, ../../../../general/res/sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } -/* line 34, ../../../../general/res/sass/tree/_tree.scss */ +/* line 35, ../../../../general/res/sass/tree/_tree.scss */ .tree-item, .search-result-item { -moz-box-sizing: border-box; @@ -4102,19 +4094,20 @@ ul.tree { line-height: 1.5rem; margin-bottom: 3px; position: relative; } - /* line 47, ../../../../general/res/sass/tree/_tree.scss */ + /* line 48, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { + color: #666; display: inline-block; margin-left: 5px; font-size: 0.75em; width: 10px; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 55, ../../../../general/res/sass/tree/_tree.scss */ + /* line 57, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { - color: #ffc700; } } - /* line 61, ../../../../general/res/sass/tree/_tree.scss */ + color: #0099cc !important; } } + /* line 63, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label, .search-result-item .label { display: block; @@ -4127,10 +4120,9 @@ ul.tree { width: auto; height: auto; line-height: 1.5rem; } - /* line 69, ../../../../general/res/sass/tree/_tree.scss */ + /* line 71, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon, .search-result-item .label .type-icon { - text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 16px; color: #0099cc; left: 5px; @@ -4141,14 +4133,14 @@ ul.tree { line-height: 100%; right: auto; width: 16px; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + /* line 84, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-alert { text-shadow: black 0 1px 2px; position: absolute; z-index: 2; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 90, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-alert { color: #ff3c00; @@ -4158,7 +4150,7 @@ ul.tree { width: 8px; top: 1px; right: -2px; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 96, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-link { color: #49dedb; @@ -4168,7 +4160,7 @@ ul.tree { width: 8px; left: -3px; bottom: 0px; } - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 104, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .title-label, .search-result-item .label .title-label { overflow: hidden; @@ -4184,67 +4176,63 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 113, ../../../../general/res/sass/tree/_tree.scss */ + /* line 115, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading, .search-result-item.loading { pointer-events: none; } - /* line 115, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .label, .search-result-item.loading .label { opacity: 0.5; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 119, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .label .title-label, .search-result-item.loading .label .title-label { font-style: italic; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 123, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.loading .wait-spinner, .search-result-item.loading .wait-spinner { margin-left: 14px; } - /* line 126, ../../../../general/res/sass/tree/_tree.scss */ + /* line 128, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { - background: #005177; + background: #1ac6ff; color: #fff; } - /* line 130, ../../../../general/res/sass/tree/_tree.scss */ + /* line 131, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { - color: #0099cc; } - /* line 133, ../../../../general/res/sass/tree/_tree.scss */ + color: #fff; } + /* line 134, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .label .type-icon, .search-result-item.selected .label .type-icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 141, ../../../../general/res/sass/tree/_tree.scss */ + /* line 142, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { - background: rgba(255, 255, 255, 0.1); - color: #999999; } - /* line 144, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item:not(.selected):hover .context-trigger, - .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 147, ../../../../general/res/sass/tree/_tree.scss */ + background: rgba(102, 102, 102, 0.1); + color: #333333; } + /* line 148, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .icon, .search-result-item:not(.selected):hover .icon { - color: #33ccff; } } - /* line 154, ../../../../general/res/sass/tree/_tree.scss */ + color: #0099cc; } } + /* line 155, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 158, ../../../../general/res/sass/tree/_tree.scss */ + /* line 159, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 164, ../../../../general/res/sass/tree/_tree.scss */ + /* line 165, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 173, ../../../../general/res/sass/tree/_tree.scss */ +/* line 174, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label { left: 15px; } @@ -5864,7 +5852,7 @@ table { color: #fff; } /* line 135, ../../../../general/res/sass/features/_imagery.scss */ .l-image-thumb-item.selected { - background: #005177; } + background: #0099cc; } /* line 137, ../../../../general/res/sass/features/_imagery.scss */ .l-image-thumb-item.selected .l-date, .l-image-thumb-item.selected .l-time { @@ -5969,3 +5957,6 @@ table { /* line 26, ../sass/_mixins.scss */ .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon { color: white; } + /* line 6, ../sass/_controls.scss */ + .s-btn.major .title-label, .major.s-menu .title-label, .overlay .bottom-bar .s-btn.major .title-label, .overlay .bottom-bar .major.s-menu .title-label { + text-transform: uppercase; } diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index c399a474df..a337d4b3cc 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -3,14 +3,16 @@ $colorBodyBg: #fff; $colorBodyFg: #666; $colorFooterBg: #000; $colorKey: #0099cc; -$colorKeySelectedBg: #005177; +$colorKeySelectedBg: $colorKey; $colorKeyFg: #fff; +$contrastRatioPercent: 30%; -$contrastRatio: 25%; -$colorBtnBg: pullForward($colorBodyBg, $contrastRatio); -$colorBtnFg: $colorBodyBg; +// Buttons +$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); +$colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent); $colorBtnIcon: $colorBtnFg; -$colorInvokeMenu: #fff; +$colorInvokeMenu: #000; +$contrastInvokeMenuPercent: 50%; $colorAlt1: #ffc700; $colorAlert: #ff3c00; @@ -47,7 +49,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%); // Overlay $colorOvrBlocker: rgba(black, 0.7); -$colorOvrBg: $colorBodyBg; +$colorOvrBg: pullForward($colorBodyBg, 10%); $colorOvrFg: $colorBodyFg; // Items $colorItemBase: lighten($colorBodyBg, 5%); @@ -62,7 +64,18 @@ $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%); $tabularColorHeaderBorder: $colorBodyBg; // Tree $colorItemTreeIcon: $colorKey; -$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); -$colorItemTreeVCHover: $colorAlt1; +$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%); +$colorItemTreeVCHover: $colorKey; +$colorItemTreeFg: $colorBodyFg; +$colorItemTreeSelectedBg: pushBack($colorKey, 15%); +$colorItemTreeSelectedFg: $colorBodyBg; +$colorItemTreeVC: $colorBodyFg; +$colorItemTreeSelectedVC: $colorBodyBg; +$shdwItemTreeIcon: none; // Scrollbar -$scrollbarTrackColorBg: rgba(#000, 0.4); \ No newline at end of file +$scrollbarTrackColorBg: rgba(#000, 0.4); +// Splitter +$splitterShdw: none; +$colorSplitterInterior: $colorBodyBg; +$colorSplitterHover: $colorKey; +$colorGrippyInteriorHover: $colorBodyBg; \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/sass/_controls.scss b/platform/commonUI/themes/snow/res/sass/_controls.scss index 08f52b64f5..e06fbf1046 100644 --- a/platform/commonUI/themes/snow/res/sass/_controls.scss +++ b/platform/commonUI/themes/snow/res/sass/_controls.scss @@ -1,7 +1,10 @@ .s-btn { - &.major { - $bg: $colorKey; - $fg: lighten($bg, 70%); - @include btnSubtle($bg, $fg, $fg, 0); - } + &.major { + $bg: $colorKey; + $fg: lighten($bg, 70%); + @include btnSubtle($bg, $fg, $fg, 0); + .title-label { + text-transform: uppercase; + } + } } \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss index 404ddbdf5d..5da0a0d4f9 100644 --- a/platform/commonUI/themes/snow/res/sass/_mixins.scss +++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss @@ -1,7 +1,7 @@ -@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) { +@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) { $hovRatio: 5%; - $bgBase: $bg; //pullForward($bg, $contrastRatio); - $fgBase: $fg; //pushBack($bg, $contrastRatio); + $bgBase: $bg; //pullForward($bg, $contrastRatioPercent); + $fgBase: $fg; //pushBack($bg, $contrastRatioPercent); background-color: $bgBase; @include border-radius($controlCr); @@ -18,7 +18,7 @@ } } -@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) { +@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) { // $ic: Icon color @include border-radius($controlCr); @include containerSubtle($bg, $fg, true, 30%);