From 9acbf1df2c99ea531fc1aee816589189b70f6416 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 14 May 2024 12:14:40 -0700 Subject: [PATCH 01/11] Change base color --- src/styles/_constants-darkmatter.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index c86a6530e04..54f6d64c8c4 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -383,7 +383,7 @@ $formInputH: 22px; $formRowCtrlsH: 14px; // Inspector -$colorInspectorBg: pullForward($colorBodyBg, 5%); +$colorInspectorBg: $colorBodyBg; $colorInspectorFg: $colorBodyFg; $colorInspectorPropName: $colorBodyFg; $colorInspectorPropVal: pullForward($colorInspectorFg, 15%); @@ -391,7 +391,7 @@ $colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Tabs -$colorTabBg: $colorBodyBg; +$colorTabBg: pullForward($colorBodyBg, 5%); $colorTabFg: $colorBodyFgEm; $colorTabCurrentBg: rgba($colorKey, 0.71); $colorTabCurrentFg: $colorBodyFgEm; From afa6f5d77981f4da904a5c8e67176576f49d12f1 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 21 May 2024 14:30:02 -0700 Subject: [PATCH 02/11] updates to darkmatter --- src/plugins/displayLayout/components/telemetry-view.scss | 3 +-- src/styles/_constants-darkmatter.scss | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss index 1ec5c6612cb..c6405da04f3 100644 --- a/src/plugins/displayLayout/components/telemetry-view.scss +++ b/src/plugins/displayLayout/components/telemetry-view.scss @@ -1,7 +1,7 @@ .c-telemetry-view { display: flex; align-items: stretch; - + @include telemetryView(); > * { // Label and value holders flex: 1 1 50%; @@ -18,7 +18,6 @@ } &__value { - @include telemetryView(); @include isLimit(); } diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index 54f6d64c8c4..ec42687f237 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -212,7 +212,7 @@ $colorPausedFg: #333; // Time Colors $colorTimeCommonFg: #eee; -$colorTimeFixed: #59554c; +$colorTimeFixed: #5e594d; $colorTimeFixedBg: $colorTimeFixed; $colorTimeFixedFg: #eee; $colorTimeFixedFgSubtle: #b2aa98; @@ -235,7 +235,7 @@ $colorTimeRealtimeBtnFgMajor: #fff; $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor $colorTOIHov: $colorTimeRealtime; // was $timeControllerToiLineColorHov $timeConductorAxisHoverFilter: brightness(1.2); -$timeConductorActiveBg: $colorKey; +$timeConductorActiveBg: $colorBodyBg; $timeConductorActivePanBg: #226074; // Browse @@ -463,7 +463,7 @@ $shdwItemText: none; $colorTabBorder: pullForward($colorBodyBg, 10%); $colorTabBodyBg: $colorBodyBg; $colorTabBodyFg: pullForward($colorBodyFg, 20%); -$colorTabHeaderBg: #575757; +$colorTabHeaderBg: #2e2e2e; $colorTabHeaderFg: $colorBodyFg; $colorTabHeaderBorder: $colorBodyBg; $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%); From da520b3d06c51582b94f328fa215f4d8da3665dd Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 21 May 2024 15:26:00 -0700 Subject: [PATCH 03/11] more updates --- src/styles/_constants-darkmatter.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index ec42687f237..abd0b973784 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -391,9 +391,9 @@ $colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Tabs -$colorTabBg: pullForward($colorBodyBg, 5%); +$colorTabBg: $colorBodyBg; $colorTabFg: $colorBodyFgEm; -$colorTabCurrentBg: rgba($colorKey, 0.71); +$colorTabCurrentBg: radial-gradient(circle, rgba($colorKey, 0.8) 58%, rgba(0, 59, 156, 1) 100%); $colorTabCurrentFg: $colorBodyFgEm; $colorTabsBaseline: $colorBodyBg; From 6d67ffebb99a9c44f4a733db49db6ea964d85c2d Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Fri, 24 May 2024 10:03:49 -0700 Subject: [PATCH 04/11] add new mixin --- src/plugins/displayLayout/components/display-layout.scss | 1 + src/styles/_constants-darkmatter.scss | 7 ++++--- src/styles/_constants-espresso.scss | 1 + src/styles/_constants-maelstrom.scss | 1 + src/styles/_constants-snow.scss | 1 + 5 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/plugins/displayLayout/components/display-layout.scss b/src/plugins/displayLayout/components/display-layout.scss index 07bf6c00189..35d1c3489ab 100644 --- a/src/plugins/displayLayout/components/display-layout.scss +++ b/src/plugins/displayLayout/components/display-layout.scss @@ -55,6 +55,7 @@ &__frame { position: absolute; + border-radius: $layoutCornerSize; } } diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index abd0b973784..f52580b3fa8 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -143,7 +143,7 @@ $colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brigh $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); $colorKeySelectedBg: $colorKey; -$uiColor: #0093ff; // Resize bars, splitter bars, etc. +$uiColor: lighten($colorKey, 10%); // Resize bars, splitter bars, etc. $colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5); $colorA: #ccc; @@ -246,6 +246,7 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(1.2) contrast(1.1); $interiorMarginObjectFrameVertical: 10px; $interiorMarginObjectFrameHorizontal: 10px; +$layoutCornerSize: 5px; // Missing Items $filterItemMissing: brightness(0.6) grayscale(1); @@ -391,7 +392,7 @@ $colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); // Tabs -$colorTabBg: $colorBodyBg; +$colorTabBg: #2c2c34; $colorTabFg: $colorBodyFgEm; $colorTabCurrentBg: radial-gradient(circle, rgba($colorKey, 0.8) 58%, rgba(0, 59, 156, 1) 100%); $colorTabCurrentFg: $colorBodyFgEm; @@ -559,7 +560,7 @@ $splitterHandleD: 2px; $splitterD: $splitterHandleD; $splitterHandleHitMargin: 4px; $colorSplitterBaseBg: $colorBodyBg; -$colorSplitterBg: pullForward($colorBodyBg, 10%); +$colorSplitterBg: pullForward($colorBodyBg, 15%); $colorSplitterFg: $colorBodyBg; $colorSplitterHover: $uiColor; $colorSplitterActive: $colorKey; diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index 3abae3f1dc2..8df6b10db71 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -216,6 +216,7 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(1.2) contrast(1.1); $interiorMarginObjectFrameVertical: 0px; $interiorMarginObjectFrameHorizontal: 3px; +$layoutCornerSize: 0px; // Missing Items $filterItemMissing: brightness(0.6) grayscale(1); diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index 8935dfb65b3..2950fb38d57 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -232,6 +232,7 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(1.2) contrast(1.1); $interiorMarginObjectFrameVertical: 0px; $interiorMarginObjectFrameHorizontal: 3px; +$layoutCornerSize: 0px; // Missing Items $filterItemMissing: contrast(0.2); diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index 3bc73d0184f..d69e02ea734 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -215,6 +215,7 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(0.9); $interiorMarginObjectFrameVertical: 0px; $interiorMarginObjectFrameHorizontal: 3px; +$layoutCornerSize: 0px; // Missing Items $filterItemMissing: contrast(0.2); From 8fd8699d17a7e0ae2e7f27f37e8a50a42924190f Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 28 May 2024 15:24:57 -0700 Subject: [PATCH 05/11] add rounded corners to telemetry views --- .../components/telemetry-view.scss | 1 + .../displayLayout/components/text-view.scss | 1 + src/styles/_constants-darkmatter.scss | 4 +- src/styles/notebook.scss | 47 ++++++++++++++++++- 4 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss index c6405da04f3..4340d3950f6 100644 --- a/src/plugins/displayLayout/components/telemetry-view.scss +++ b/src/plugins/displayLayout/components/telemetry-view.scss @@ -33,6 +33,7 @@ .c-frame & { @include abs(); + @include telemetryView(); border: 1px solid transparent; } diff --git a/src/plugins/displayLayout/components/text-view.scss b/src/plugins/displayLayout/components/text-view.scss index 043035b5b68..fbd3c1e8a75 100644 --- a/src/plugins/displayLayout/components/text-view.scss +++ b/src/plugins/displayLayout/components/text-view.scss @@ -6,6 +6,7 @@ .c-frame & { @include abs(); + @include telemetryView(); border: 1px solid transparent; } } diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index f52580b3fa8..4143ad8ea42 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -338,7 +338,7 @@ $shdwSelect: rgba(black, 0.5) 0 0.5px 3px; $controlDisabledOpacity: 0.2; // Menus -$colorMenuBg: rgba($colorBodyBg, 0.6); +$colorMenuBg: rgba($colorBodyBg, 0.9); $colorMenuFg: $colorBodyFg; $colorMenuIc: $colorKey; $filterMenu: brightness(1.4); @@ -497,7 +497,7 @@ $colorGaugeLimitLow: $colorGaugeLimitHigh; $colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge. $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges -$gaugeMeterValueShadow: rgba(255, 255, 255, 0.5); +$gaugeMeterValueShadow: rgba(255, 255, 255, 0.2); // TODO: This is some code regarding how we can make Gauges include a border or glow. We may need to revisit this. // padding: 5%; // background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%) diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss index 44427e15995..4b24d64cb19 100644 --- a/src/styles/notebook.scss +++ b/src/styles/notebook.scss @@ -591,6 +591,51 @@ [class*='__item-description'] { min-width: 200px; + &__name, + &__link { + // Holds __link and __context-available + display: flex; + align-items: center; + } + + &__link { + flex: 1 1 auto; + + &:before { + display: block; + font-size: 1em; + margin-right: $interiorMarginSm; + } + } + + &__context-available { + font-size: 0.7em; + margin-left: $interiorMarginSm; + } + + &__snap-thumb { + @include snapThumb(); + } + + &__actions { + margin: $interiorMarginSm; + } + + &__actions-menu { + width: 55vh; + max-width: 500px; + height: 130px; + z-index: 70; + + [class*='__icon'] { + //filter: $colorKeyFilter; + margin: 0%; + height: 4vh; + } + + [class*='__item-description'] { + min-width: 200px; + } } } } @@ -902,4 +947,4 @@ body.mobile { &__name:focus { text-overflow: clip; } -} +} \ No newline at end of file From 4484740f24e838c160c6e19abde59eff11399f17 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 28 May 2024 15:26:26 -0700 Subject: [PATCH 06/11] add saved files --- src/plugins/displayLayout/components/telemetry-view.scss | 1 - src/styles/notebook.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss index 4340d3950f6..c6405da04f3 100644 --- a/src/plugins/displayLayout/components/telemetry-view.scss +++ b/src/plugins/displayLayout/components/telemetry-view.scss @@ -33,7 +33,6 @@ .c-frame & { @include abs(); - @include telemetryView(); border: 1px solid transparent; } diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss index 4b24d64cb19..7c78d033f94 100644 --- a/src/styles/notebook.scss +++ b/src/styles/notebook.scss @@ -628,7 +628,7 @@ z-index: 70; [class*='__icon'] { - //filter: $colorKeyFilter; + filter: $colorKeyFilter; margin: 0%; height: 4vh; } From 7d9621940c9ea13f21b892cfcdde25e4e8cf8586 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Mon, 3 Jun 2024 10:44:41 -0700 Subject: [PATCH 07/11] remove shadows on layout subcomponents --- src/styles/_constants-darkmatter.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index 4143ad8ea42..81cd3e79a76 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -241,7 +241,7 @@ $timeConductorActivePanBg: #226074; // Browse $browseFrameColor: pullForward($colorBodyBg, 10%); $browseFrameBorder: 1px solid rgb(89, 89, 89, 0.4); // Frames in Disp and Flex Layouts when frame is showing -$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px; +$browseSelectableShdwHov: rgba($colorBodyFg, 0) 0 0 3px; $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(1.2) contrast(1.1); $interiorMarginObjectFrameVertical: 10px; From d3ca0f47e6c41d2b76d650b9fbe50c389e9c08ba Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Mon, 10 Jun 2024 18:11:47 -0700 Subject: [PATCH 08/11] Add shadows to panes. Style changes to timelist. Shadows to object tree. --- src/plugins/timelist/timelist.scss | 8 ++++++++ src/styles/_constants-darkmatter.scss | 29 +++++++++++++++------------ src/styles/_constants-espresso.scss | 3 +++ src/styles/_constants-maelstrom.scss | 3 +++ src/styles/_constants-snow.scss | 3 +++ src/ui/layout/mct-tree.scss | 1 + src/ui/layout/pane.scss | 1 + 7 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/plugins/timelist/timelist.scss b/src/plugins/timelist/timelist.scss index 5dab0dfa043..3e08a520c98 100644 --- a/src/plugins/timelist/timelist.scss +++ b/src/plugins/timelist/timelist.scss @@ -134,6 +134,7 @@ padding-top: 1px; } +<<<<<<< HEAD &__activity-color-swatch { $d: 16px; border-radius: 50%; @@ -141,6 +142,13 @@ width: $d; height: $d; } +======= + &[s-selected] { + box-shadow: + inset rgba($colorSelectedFg, 0.8) 0 0 0 1px, + $colorSelectedGlow 0 0 5px 1px; + color: $colorSelectedFg !important; +>>>>>>> b457d8a2c (Add shadows to panes. Style changes to timelist. Shadows to object tree.) &__title-and-bounds { > * + * { diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index 81cd3e79a76..b0eddf611bf 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -151,7 +151,8 @@ $colorAHov: #fff; $filterHov: brightness(1.3) contrast(1.5); // Tree, location items $filterHovSubtle: brightness(1.2) contrast(1.2); $colorSelectedBg: rgba($colorKey, 0.3); -$colorSelectedFg: pullForward($colorBodyFg, 20%); +$colorSelectedFg: darken($colorBodyFg, 0.8); +$colorSelectedGlow: rgba($colorKeyFg, 0.58); // Glow around selected item // Body constants $bodyBg: $colorBodyBg url('../ui/layout/assets/images/darkmatter-bg.png') no-repeat center 85%; // Reference: https://science.nasa.gov/wp-content/uploads/2023/08/s2-1280.jpg?w=4096&format=webp @@ -338,7 +339,7 @@ $shdwSelect: rgba(black, 0.5) 0 0.5px 3px; $controlDisabledOpacity: 0.2; // Menus -$colorMenuBg: rgba($colorBodyBg, 0.9); +$colorMenuBg: rgba($colorBodyBg, 0.8); $colorMenuFg: $colorBodyFg; $colorMenuIc: $colorKey; $filterMenu: brightness(1.4); @@ -388,8 +389,8 @@ $colorInspectorBg: $colorBodyBg; $colorInspectorFg: $colorBodyFg; $colorInspectorPropName: $colorBodyFg; $colorInspectorPropVal: pullForward($colorInspectorFg, 15%); -$colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75); -$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%); +$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 0.9); +$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 80%); // Tabs $colorTabBg: #2c2c34; @@ -503,7 +504,7 @@ $gaugeMeterValueShadow: rgba(255, 255, 255, 0.2); // background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%) // Time Strip and Lists -$colorPastBg: #444; +$colorPastBg: rgba(#444, 0.5); $colorPastFg: pushBack($colorBodyFg, 10%); $colorPastFgEm: $colorBodyFg; $colorCurrentBg: #666; @@ -514,7 +515,7 @@ $colorFutureBg: $colorPastBg; $colorFutureFg: $colorCurrentFg; $colorFutureFgEm: $colorCurrentFgEm; $colorFutureBorder: $colorCurrentBorder; -$colorInProgressBg: $colorTimeRealtimeBg; +$colorInProgressBg: rgba($colorTimeRealtimeBg, 0.6); $colorInProgressFg: $colorTimeRealtimeFgSubtle; $colorInProgressFgEm: $colorTimeRealtimeFg; $colorGanttSelectedBorder: rgba(#fff, 0.3); @@ -537,6 +538,7 @@ $colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeNewNode: rgba($colorBodyFg, 0.7); $shdwItemTreeIcon: none; +$colorItemTreeShdw: rgba($colorKeyFg, 0.3) 0 0px 10px; // Layout frame controls $frameControlsColorFg: white; @@ -548,10 +550,10 @@ $colorThumbHoverBg: $colorItemTreeHoverBg; // Scrollbar $scrollbarTrackSize: 7px; -$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; -$scrollbarTrackColorBg: rgba(#000, 0.2); -$scrollbarThumbColor: pushBack($colorBodyBg, 50%); -$scrollbarThumbColorHov: $colorKey; +$scrollbarTrackShdw: rgba(#ffffff, 0.4) 0 1px 2px; +$scrollbarTrackColorBg: rgba($colorKey, 0.2); +$scrollbarThumbColor: darken($colorKeyBg, 15%); +$scrollbarThumbColorHov: pushBack($colorKeyBg, 20%); $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%); $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%); @@ -562,16 +564,17 @@ $splitterHandleHitMargin: 4px; $colorSplitterBaseBg: $colorBodyBg; $colorSplitterBg: pullForward($colorBodyBg, 15%); $colorSplitterFg: $colorBodyBg; -$colorSplitterHover: $uiColor; +$colorSplitterHover: $colorKey; $colorSplitterActive: $colorKey; $splitterBtnD: (16px, 35px); // height, width $splitterBtnColorBg: $colorBtnBg; $splitterBtnColorFg: #999; $splitterBtnLabelColorFg: #9d9d9d; $splitterCollapsedBtnColorBg: #222; -$splitterCollapsedBtnColorFg: #555; -$splitterCollapsedBtnColorBgHov: $colorKey; +$splitterCollapsedBtnColorFg: #8b8b8b; +$splitterCollapsedBtnColorBgHov: $colorKeyBg; $splitterCollapsedBtnColorFgHov: $colorKeyFg; +$splitterCollapsedBtnColorShdw: rgba($colorKeyFg, 0.2); // Mobile $colorMobilePaneLeft: pushBack($colorBodyBg, 2%); diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index 8df6b10db71..50cd210756e 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -122,6 +122,7 @@ $filterHov: brightness(1.3) contrast(1.5); // Tree, location items $filterHovSubtle: brightness(1.2) contrast(1.2); $colorSelectedBg: rgba($colorKey, 0.3); $colorSelectedFg: pullForward($colorBodyFg, 20%); +$colorSelectedGlow: rgba($colorKey, 0); // Body constants $bodyBg: $colorBodyBg; @@ -502,6 +503,7 @@ $colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeNewNode: rgba($colorBodyFg, 0.7); $shdwItemTreeIcon: none; +$colorItemTreeShdw: none; // Layout frame controls $frameControlsColorFg: white; @@ -537,6 +539,7 @@ $splitterCollapsedBtnColorBg: $colorHeadBg; $splitterCollapsedBtnColorFg: #757575; $splitterCollapsedBtnColorBgHov: $colorKeyBg; $splitterCollapsedBtnColorFgHov: $colorKeyFg; +$splitterCollapsedBtnColorShdw: rgba($colorKeyFg, 0) 0 0 6px 1px; // Mobile $colorMobilePaneLeft: pushBack($colorBodyBg, 2%); diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index 2950fb38d57..f12417146bc 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -138,6 +138,7 @@ $filterHov: brightness(1.3) contrast(1.5); // Tree, location items $filterHovSubtle: brightness(1.2) contrast(1.2); $colorSelectedBg: rgba($colorKey, 0.3); $colorSelectedFg: pullForward($colorBodyFg, 20%); +$colorSelectedGlow: rgba($colorKey, 0); // Body constants $bodyBg: $colorBodyBg; @@ -518,6 +519,7 @@ $colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeNewNode: rgba($colorBodyFg, 0.7); $shdwItemTreeIcon: none; +$colorItemTreeShdw: none; // Layout frame controls $frameControlsColorFg: white; @@ -553,6 +555,7 @@ $splitterCollapsedBtnColorBg: #222; $splitterCollapsedBtnColorFg: #555; $splitterCollapsedBtnColorBgHov: $colorKey; $splitterCollapsedBtnColorFgHov: $colorKeyFg; +$splitterCollapsedBtnColorShdw: rgba($colorKeyFg, 0) 0 0 6px 1px; // Mobile $colorMobilePaneLeft: pushBack($colorBodyBg, 2%); diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index d69e02ea734..5ad95536c9e 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -121,6 +121,7 @@ $filterHov: hue-rotate(-10deg) brightness(0.8) contrast(2); // Tree, location it $filterHovSubtle: hue-rotate(-8deg) brightness(0.5) contrast(1.2); $colorSelectedBg: pushBack($colorKey, 40%); $colorSelectedFg: pullForward($colorBodyFg, 10%); +$colorSelectedGlow: rgba($colorKey, 0); // Body constants $bodyBg: $colorBodyBg; @@ -501,6 +502,7 @@ $colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeNewNode: rgba($colorBodyFg, 0.5); $shdwItemTreeIcon: none; +$colorItemTreeShdw: none; // Layout frame controls $frameControlsColorFg: $colorClickIconButton; @@ -536,6 +538,7 @@ $splitterCollapsedBtnColorBg: #ccc; $splitterCollapsedBtnColorFg: #666; $splitterCollapsedBtnColorBgHov: $colorKey; $splitterCollapsedBtnColorFgHov: $colorKeyFg; +$splitterCollapsedBtnColorShdw: rgba($colorKeyFg, 0) 0 0 6px 1px; // Mobile $colorMobilePaneLeft: pullForward($colorBodyBg, 2%); diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss index 17f816d4566..c4628858ba7 100644 --- a/src/ui/layout/mct-tree.scss +++ b/src/ui/layout/mct-tree.scss @@ -101,6 +101,7 @@ &.is-navigated-object, &.is-selected { background: $colorItemTreeSelectedBg; + box-shadow: $colorItemTreeShdw; [class*='__name'] { color: $colorItemTreeSelectedFg; diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss index 08a43aa958a..5a2c21df48d 100644 --- a/src/ui/layout/pane.scss +++ b/src/ui/layout/pane.scss @@ -142,6 +142,7 @@ display: none; // Hidden by default background-color: $splitterCollapsedBtnColorBg; color: $splitterCollapsedBtnColorFg; + box-shadow: $splitterCollapsedBtnColorShdw 0 0 9px 1px; &:before { // '+' icon From 4e260b8f77535b8d64058850ce077786ed20d582 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 25 Jun 2024 13:52:36 -0700 Subject: [PATCH 09/11] update the glow on frame borders --- src/styles/_constants-darkmatter.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index b0eddf611bf..9b965adf0cc 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -75,7 +75,6 @@ $numericFont: 'Chakra Petch', sans-serif; } @mixin telemetryView() { - border: 1px solid $colorBodyFg; border-radius: $controlCr; } @@ -99,7 +98,7 @@ $numericFont: 'Chakra Petch', sans-serif; background-repeat: no-repeat; background-size: 35px 35px; border-radius: $interiorMarginLg; - box-shadow: 0px 0px 20px 2px rgb(140 140 140 / 20%); + box-shadow: 0px 0px 8px 4px rgb(140 140 140 / 24%); } // Functions From 22a70c64720a673fe4df88af13986cd581b5b2e9 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Mon, 5 Aug 2024 12:50:25 -0700 Subject: [PATCH 10/11] Fix merge conflicts and bring branch up to date --- src/plugins/timelist/timelist.scss | 12 ++------ src/styles/notebook.scss | 47 +----------------------------- 2 files changed, 4 insertions(+), 55 deletions(-) diff --git a/src/plugins/timelist/timelist.scss b/src/plugins/timelist/timelist.scss index 3e08a520c98..b658c873505 100644 --- a/src/plugins/timelist/timelist.scss +++ b/src/plugins/timelist/timelist.scss @@ -120,7 +120,9 @@ grid-column-gap: $interiorMargin; &[s-selected] { - box-shadow: inset rgba($colorSelectedFg, 0.8) 0 0 0 1px; + box-shadow: + inset rgba($colorSelectedFg, 0.8) 0 0 0 1px, + $colorSelectedGlow 0 0 5px 1px; color: $colorSelectedFg !important; @include styleTliEm($colorSelectedFg); @@ -134,7 +136,6 @@ padding-top: 1px; } -<<<<<<< HEAD &__activity-color-swatch { $d: 16px; border-radius: 50%; @@ -142,13 +143,6 @@ width: $d; height: $d; } -======= - &[s-selected] { - box-shadow: - inset rgba($colorSelectedFg, 0.8) 0 0 0 1px, - $colorSelectedGlow 0 0 5px 1px; - color: $colorSelectedFg !important; ->>>>>>> b457d8a2c (Add shadows to panes. Style changes to timelist. Shadows to object tree.) &__title-and-bounds { > * + * { diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss index 7c78d033f94..44427e15995 100644 --- a/src/styles/notebook.scss +++ b/src/styles/notebook.scss @@ -591,51 +591,6 @@ [class*='__item-description'] { min-width: 200px; - &__name, - &__link { - // Holds __link and __context-available - display: flex; - align-items: center; - } - - &__link { - flex: 1 1 auto; - - &:before { - display: block; - font-size: 1em; - margin-right: $interiorMarginSm; - } - } - - &__context-available { - font-size: 0.7em; - margin-left: $interiorMarginSm; - } - - &__snap-thumb { - @include snapThumb(); - } - - &__actions { - margin: $interiorMarginSm; - } - - &__actions-menu { - width: 55vh; - max-width: 500px; - height: 130px; - z-index: 70; - - [class*='__icon'] { - filter: $colorKeyFilter; - margin: 0%; - height: 4vh; - } - - [class*='__item-description'] { - min-width: 200px; - } } } } @@ -947,4 +902,4 @@ body.mobile { &__name:focus { text-overflow: clip; } -} \ No newline at end of file +} From 6f4ac30d15e0edfd71d5b66eecbf2b7ee12cee7b Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Wed, 7 Aug 2024 13:41:14 -0700 Subject: [PATCH 11/11] Final changes to darkmatter --- src/styles/_constants-darkmatter.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index 9b965adf0cc..7968f9ddd37 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -497,7 +497,7 @@ $colorGaugeLimitLow: $colorGaugeLimitHigh; $colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge. $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges -$gaugeMeterValueShadow: rgba(255, 255, 255, 0.2); +$gaugeMeterValueShadow: rgba(255, 255, 255, 0.1); // TODO: This is some code regarding how we can make Gauges include a border or glow. We may need to revisit this. // padding: 5%; // background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%)