mirror of
https://github.com/nasa/openmct.git
synced 2025-02-06 02:59:19 +00:00
[Frontend] IN-PROGRESS Theme changes continuing
open #95 Mostly about the overlay and forms; Buttons, menus, selects tweaks continued; Initial check and tweaks in mobile;
This commit is contained in:
Charles Hacskaylo
parent
86deec6364
commit
4db48afab0
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="LocatorController" class="selector-list">
|
||||
<div>
|
||||
<div class="wrapper">
|
||||
<mct-representation key="'tree'"
|
||||
mct-object="rootObject"
|
||||
ng-model="treeModel">
|
||||
|
||||
@ -97,7 +97,6 @@ $formTBPad: $interiorMargin;
|
||||
$formLRPad: $interiorMargin;
|
||||
$menuLineH: 1.5rem;
|
||||
$menuLineHPx: 24px;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$btnStdH: 25px;
|
||||
$btnToolbarH: $btnStdH;
|
||||
|
||||
|
||||
@ -44,8 +44,6 @@
|
||||
|
||||
/********************************* FORMS */
|
||||
@import "forms/elems";
|
||||
@import "forms/textarea";
|
||||
@import "forms/text-input";
|
||||
@import "forms/selects";
|
||||
@import "forms/channel-selector";
|
||||
@import "forms/datetime";
|
||||
|
||||
@ -146,13 +146,13 @@
|
||||
}
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
$b: 1px solid lighten($bg, 30%);
|
||||
//$b: 1px solid lighten($bg, 30%);
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include boxIncised(0.7);
|
||||
background-color: $bg;
|
||||
border-bottom: $b;
|
||||
border-right: $b;
|
||||
//border-bottom: $b;
|
||||
//border-right: $b;
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
@ -184,8 +184,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6) {
|
||||
@include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
|
||||
@mixin boxIncised($sVal: 0.6, $inset: 5px) {
|
||||
@include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
|
||||
}
|
||||
|
||||
@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
|
||||
@ -257,6 +257,30 @@
|
||||
}
|
||||
|
||||
/*********************************************** 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.4) 0 1px 2px);
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
outline: none;
|
||||
&.error {
|
||||
background: rgba(red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include appearance(none);
|
||||
@include border-radius($controlCr);
|
||||
@ -275,6 +299,8 @@
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
|
||||
@ -80,22 +80,24 @@ $pad: $interiorMargin * $baseRatio;
|
||||
&.sm {
|
||||
padding: 0 $pad / $baseRatio;
|
||||
}
|
||||
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
|
||||
&:not(.major) {
|
||||
@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
|
||||
&.major {
|
||||
$bg: $colorBtnMajorBg;
|
||||
$hc: lighten($bg, 10%);
|
||||
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
|
||||
}
|
||||
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
$fg: lighten($bg, 70%);
|
||||
@include btnSubtle($bg, $fg, $fg);
|
||||
&:not(.major) {
|
||||
// bg, bgHov, fg, ic
|
||||
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
|
||||
@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
|
||||
.icon:before {
|
||||
content: "\0000EF";
|
||||
}
|
||||
|
||||
@ -349,18 +349,20 @@ label.checkbox.custom {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
$bg: lighten($colorBodyBg, 10%);
|
||||
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
|
||||
@include border-radius(1px);
|
||||
$bg: $scrollbarThumbColor;
|
||||
$hc: $scrollbarThumbColorHov;
|
||||
$gr: 5%;
|
||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include boxShdwSubtle();
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
//@include boxShdwSubtle();
|
||||
//border-top: 1px solid lighten($bg, 20%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(#000, 0.4);
|
||||
background: $scrollbarTrackColorBg;
|
||||
}
|
||||
}
|
||||
@ -66,15 +66,18 @@
|
||||
|
||||
/******************************************************** MENUS THEMSELVES */
|
||||
.menu-element {
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bgHover: lighten($bg, 20%);
|
||||
$bg: $colorMenuBg;
|
||||
$fg: $colorMenuFg;
|
||||
$ic: $colorMenuIc;
|
||||
$bgHover: $colorMenuHov;
|
||||
$iconColor: $colorKey;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.menu {
|
||||
@include border-radius($basicCr);
|
||||
@include containerSubtle($bg);
|
||||
@include txtShdwSubtle(0.2);
|
||||
@include containerSubtle($bg, $fg);
|
||||
@include boxShdw($shdwMenu);
|
||||
@include txtShdw($shdwMenuText);
|
||||
display: block; // set to block via jQuery
|
||||
padding: $interiorMarginSm 0;
|
||||
position: absolute;
|
||||
@ -84,7 +87,7 @@
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
color: lighten($bg, 60%);
|
||||
color: pullForward($bg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
position: relative;
|
||||
@ -95,17 +98,10 @@
|
||||
&:hover {
|
||||
background: $bgHover;
|
||||
color: $colorKeyFg;
|
||||
//a {
|
||||
// color: $colorKeyFg;
|
||||
//}
|
||||
.icon {
|
||||
color: lighten($iconColor, 20%);
|
||||
}
|
||||
}
|
||||
//a {
|
||||
// color: lighten($bg, 60%);
|
||||
// display: block;
|
||||
//}
|
||||
.type-icon {
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
@ -115,12 +111,7 @@
|
||||
|
||||
.context-menu,
|
||||
.super-menu {
|
||||
$bg: $colorMenuBg;
|
||||
$fg: $colorMenuFg;
|
||||
$ic: $colorMenuIc;
|
||||
//font-size: 0.80rem;
|
||||
pointer-events: auto;
|
||||
@include containerSubtle($bg);
|
||||
ul li {
|
||||
padding-left: 25px;
|
||||
a {
|
||||
@ -170,8 +161,7 @@
|
||||
$h: $w - 20;
|
||||
$plw: 50%; //$w * 0.5;
|
||||
$prw: 50%; //$w - $plw;
|
||||
$fg: #fff; //lighten($colorBodyFg, 40%);
|
||||
$bgHover: $colorKey; //$bg;
|
||||
//$fg: #fff; //lighten($colorBodyFg, 40%);
|
||||
display: block;
|
||||
width: $w;
|
||||
height: $h;
|
||||
@ -203,15 +193,13 @@
|
||||
right: 0;
|
||||
padding: $interiorMargin * 5;
|
||||
width: $prw;
|
||||
.icon {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-item-description {
|
||||
.desc-area {
|
||||
&.icon {
|
||||
$h: 150px;
|
||||
color: $colorCreateMenuLgIcon;
|
||||
position: relative;
|
||||
font-size: 8em;
|
||||
left: 0;
|
||||
@ -221,13 +209,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
&.title {
|
||||
color: $fg;
|
||||
color: $colorCreateMenuText;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&.description {
|
||||
//color: lighten($bg, 30%);
|
||||
color: $fg;
|
||||
color: $colorCreateMenuText;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
*****************************************************************************/
|
||||
.section-header {
|
||||
@include border-radius($basicCr);
|
||||
background: rgba(#fff, 0.1);
|
||||
background: $colorFormSectionHeader;
|
||||
$c: lighten($colorBodyFg, 20%);
|
||||
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||
color: $c;
|
||||
@ -32,6 +32,7 @@
|
||||
|
||||
.form {
|
||||
// @include test(orange);
|
||||
color: $colorFormText;
|
||||
.form-section {
|
||||
position: relative;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
@ -69,7 +70,7 @@
|
||||
}
|
||||
|
||||
.value {
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
color: $colorInputFg; //lighten($colorBodyFg, 20%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
@ -111,18 +112,18 @@
|
||||
|
||||
.selector-list {
|
||||
// Used in create overlay to display tree view
|
||||
@include nice-input($colorInputBg, $colorInputFg);
|
||||
$h: 150px;
|
||||
@include border-radius($basicCr);
|
||||
@include box-sizing(border-box);
|
||||
background: rgba(black, 0.2);
|
||||
padding: $interiorMargin;
|
||||
//@include border-radius($basicCr);
|
||||
//@include box-sizing(border-box);
|
||||
//background: rgba(black, 0.2);
|
||||
//padding: $interiorMargin;
|
||||
position: relative;
|
||||
height: $h;
|
||||
overflow: auto;
|
||||
// max-width: 50%;
|
||||
.wrapper {
|
||||
>.wrapper {
|
||||
$p: $interiorMargin;
|
||||
overflow-y: auto;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
@ -160,3 +161,23 @@ label.form-control.checkbox {
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@include nice-input($colorInputBg, $colorInputFg);
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@include nice-textarea($colorInputBg, $colorInputFg);
|
||||
// font-size: 0.9em;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -19,10 +19,11 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.form-control.select {
|
||||
@include btnSubtle($colorBodyBg);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
.select {
|
||||
@include btnSubtle();
|
||||
@extend .s-menu;
|
||||
//cursor: pointer;
|
||||
//display: inline-block;
|
||||
margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -30,21 +31,21 @@
|
||||
@include appearance(none);
|
||||
@include box-sizing(border-box);
|
||||
background: none;
|
||||
color: $colorBodyFg;
|
||||
color: $colorBtnFg;
|
||||
border: none !important;
|
||||
cursor: pointer;
|
||||
padding: 4px 25px 2px 5px;
|
||||
//cursor: pointer;
|
||||
padding: 4px 25px 2px 0px;
|
||||
width: 120%;
|
||||
option {
|
||||
margin: $interiorMargin 0; // Firefox
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
color: $colorKey;
|
||||
content:"v";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
pointer-events: none;
|
||||
//color: $colorKey;
|
||||
//content:"v";
|
||||
//display: block;
|
||||
//font-family: 'symbolsfont';
|
||||
//pointer-events: none;
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: 0;
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
input[type="text"] {
|
||||
@include nice-input();
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
.edit-main textarea {
|
||||
@include nice-textarea();
|
||||
// font-size: 0.9em;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -20,9 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** STYLE */
|
||||
$colorMobilePaneLeft: #222;
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
>.holder {
|
||||
$i: 15%;
|
||||
@include containerSubtle();
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: $i; right: $i; bottom: $i; left: $i;
|
||||
@ -64,19 +64,21 @@
|
||||
height: $ovrFooterH;
|
||||
text-align: right;
|
||||
.s-btn {
|
||||
$l: 15%;
|
||||
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
|
||||
$bg: $colorOvrBtnBg;
|
||||
&:not(.major) {
|
||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
||||
}
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&.major {
|
||||
@extend .s-btn.major;
|
||||
&:hover {
|
||||
@extend .s-btn.major:hover;
|
||||
}
|
||||
}
|
||||
//&.major {
|
||||
// @extend .s-btn.major;
|
||||
// &:hover {
|
||||
// @extend .s-btn.major:hover;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
.contents.l-dialog {
|
||||
|
||||
@ -28,9 +28,9 @@
|
||||
line-height: $ueTopBarH;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* .title {
|
||||
color: #fff;
|
||||
}
|
||||
}*/
|
||||
|
||||
.buttons-main {
|
||||
font-size: 0.8em;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +1,17 @@
|
||||
/************************** COLORS AND SHADING */
|
||||
$colorBodyBg: #333;
|
||||
$colorGenBg: #222;
|
||||
$colorBodyFg: #999;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
||||
$contrastRatioPercent: 7%;
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
|
||||
$colorBtnFg: $colorBodyFg;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnIcon: $colorKey;
|
||||
$colorInvokeMenu: #fff;
|
||||
$contrastInvokeMenuPercent: 20%;
|
||||
@ -24,17 +27,23 @@ $colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
$colorMenuIc: lighten($colorKey, 17%);
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuIc: pullForward($colorKey, 17%);
|
||||
$colorMenuHov: pullForward($colorMenuBg, 10%);//
|
||||
$shdwMenu: none;
|
||||
$shdwMenuText: rgba(black, 0.1) 0 1px 2px;
|
||||
$colorCreateMenuLgIcon: $colorMenuFg;
|
||||
$colorCreateMenuText: $colorMenuFg;//
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormRequired: $colorAlt1;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
$colorFormInvalid: #ff3300;
|
||||
$colorInputBg: rgba(#fff, 0.1);
|
||||
$colorInputFg: pullForward($colorBodyFg, 20%);
|
||||
$colorFormText: rgba(#fff, 0.5);
|
||||
// Limits and staleness colors
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
@ -49,8 +58,9 @@ $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: pullForward($colorBodyBg, 10%);
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
|
||||
$colorOvrFg: pullForward($colorBodyFg, 30%);
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
// Items
|
||||
$colorItemBg: lighten($colorBodyBg, 5%);
|
||||
$colorItemFg: lighten($colorItemBg, 50%);
|
||||
@ -60,7 +70,6 @@ $colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: rgba(black, 0.1) 0 1px 2px;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$tabularColorBorder: rgba(white, 0.1);
|
||||
$tabularColorBodyBg: darken($colorBodyBg, 10%);
|
||||
@ -79,9 +88,15 @@ $colorItemTreeSelectedVC: $colorItemTreeVC;
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
$shdwItemTreeIcon: 0.6;
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
|
||||
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
|
||||
// Splitter
|
||||
$splitterShdw: rgba(black, 0.4) 0 0 3px;
|
||||
$colorSplitterInterior: $colorBodyBg;
|
||||
$colorSplitterHover: none;
|
||||
$colorGrippyInteriorHover: $colorKey;
|
||||
|
||||
/********************************* MOBILE */
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 5%);
|
||||
@ -15,33 +15,27 @@
|
||||
border: none;
|
||||
//border-top: 1px solid lighten($gradC1, 2%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
|
||||
color: pullForward($fgBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
display: inline-block;//
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
|
||||
// $ic: Icon color
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
|
||||
@include user-select(none);
|
||||
@include border-radius($controlCr);
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
@include containerSubtle($bg, $fg);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
color: $fg;
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
&:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: lighten($ic, $ltGamma);
|
||||
}
|
||||
@if $bgHov != none {
|
||||
&:not(.disabled):hover {
|
||||
background-color: $bgHov;
|
||||
.icon {
|
||||
color: lighten($ic, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}//
|
||||
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,41 +1,53 @@
|
||||
$basicCr: 4px;
|
||||
$controlCr: $basicCr;
|
||||
/************************** COLORS AND SHADING */
|
||||
$colorBodyBg: #fff;
|
||||
$colorBodyBg: #efefef;
|
||||
$colorGenBg: #fff; // NEW
|
||||
$colorBodyFg: #666;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$contrastRatioPercent: 30%;
|
||||
|
||||
// Buttons
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnIcon: $colorBtnFg;
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 50%;
|
||||
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlt1: #ff6600;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
$colorMenuIc: lighten($colorKey, 17%);
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuIc: $colorKey;
|
||||
$colorMenuHov: pullForward($colorMenuBg, 10%);
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormLines: rgba(#fff, 0.1); // MOVED
|
||||
$colorFormSectionHeader: rgba(#000, 0.1);
|
||||
$colorInputBg: $colorGenBg;
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorFormText: pushBack($colorBodyFg, 10%);
|
||||
// Limits and staleness colors
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
@ -48,9 +60,11 @@ $colorInfoBubbleBg: #ddd;
|
||||
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: pullForward($colorBodyBg, 10%);
|
||||
$colorOvrBlocker: rgba(black, 0.7);//
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
// Items
|
||||
$colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
|
||||
$colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
|
||||
@ -78,9 +92,15 @@ $colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
// Scrollbar
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.5);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 25%);//
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
// Splitter
|
||||
$splitterShdw: none;
|
||||
$colorSplitterInterior: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey;
|
||||
$colorGrippyInteriorHover: $colorBodyBg;
|
||||
|
||||
/********************************* MOBILE */
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
@ -1,8 +1,5 @@
|
||||
.s-btn {
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
$fg: lighten($bg, 70%);
|
||||
@include btnSubtle($bg, $fg, $fg, 0);
|
||||
.title-label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) {
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
$hovRatio: 5%;
|
||||
$bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
|
||||
$fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
|
||||
@ -6,35 +6,22 @@
|
||||
background-color: $bgBase;
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
//@include boxShdwSubtle();
|
||||
//border: none;
|
||||
//border-top: 1px solid lighten($gradC1, 2%);
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
background-color: $colorKey; //pullForward($bgBase, $hovRatio);
|
||||
//color: pushBack($fgBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) {
|
||||
// $ic: Icon color
|
||||
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
|
||||
@include user-select(none);
|
||||
@include border-radius($controlCr);
|
||||
@include containerSubtle($bg, $fg, true, 30%);
|
||||
@include containerSubtle($bg, $fg);
|
||||
color: $ic;
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
/* &:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: pullForward($ic, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@if $bgHov != none {
|
||||
&:not(.disabled):hover {
|
||||
background-color: $bgHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user