From 4d54c33867a0bb89bdaf6b890914afba3ed704c4 Mon Sep 17 00:00:00 2001 From: Rukmini Bose Date: Tue, 25 Jun 2024 13:52:36 -0700 Subject: [PATCH] update the glow on frame borders --- src/styles/_constants-darkmatter.scss | 70 +++++++++++++++------------ 1 file changed, 40 insertions(+), 30 deletions(-) diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss index 240169aab65..a186092f364 100644 --- a/src/styles/_constants-darkmatter.scss +++ b/src/styles/_constants-darkmatter.scss @@ -22,9 +22,9 @@ /************************************************** DARKMATTER THEME*/ // Fonts -@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts. +@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts. @import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); // Body Font, Exo -@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap');// Temporary numeric font, Chakra Petch (need to import local font instead). +@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap'); // Temporary numeric font, Chakra Petch (need to import local font instead). $heroFont: 'Teko', sans-serif; $headerFont: 'Cabin Condensed', sans-serif; $bodyFont: 'Exo', sans-serif; @@ -45,7 +45,7 @@ $numericFont: 'Chakra Petch', sans-serif; font-size: $size; } -@mixin numericFont($size: 1em){ +@mixin numericFont($size: 1em) { font-family: $numericFont; font-size: $size; } @@ -70,15 +70,16 @@ $numericFont: 'Chakra Petch', sans-serif; } @mixin themedButton($c: $colorBtnBg) { - background: radial-gradient(rgba($c, 1) , rgba($c, .7)); + background: radial-gradient(rgba($c, 1), rgba($c, 0.7)); box-shadow: rgba(black, 0.5) 0 0.5px 2px; } -@mixin telemetryView(){ +@mixin telemetryView() { border-radius: $controlCr; } -@mixin browseFrameBorder() { // Used on main object container to add highlighted corners to non-hidden frames. +@mixin browseFrameBorder() { + // Used on main object container to add highlighted corners to non-hidden frames. border-image: radial-gradient(circle, #575757, #6c6c6c, #818181, #979797, #aeaeae); border-style: solid; padding: 10px; @@ -92,18 +93,17 @@ $numericFont: 'Chakra Petch', sans-serif; linear-gradient(to bottom, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 0, linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 0 100%, linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 100%, - rgb(0, 0, 0, .4); + rgb(0, 0, 0, 0.4); 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 @function buttonBg($c: $colorBtnBg) { - @return radial-gradient(rgba($colorBodyBg, 1) , rgba($colorBodyBg, .6)); + @return radial-gradient(rgba($colorBodyBg, 1), rgba($colorBodyBg, 0.6)); } @function pullForward($val, $amt) { @@ -130,14 +130,15 @@ $colorBodyFg: #aaaaaa; $colorBodyFgSubtle: #9c9c9c; $colorBodyFgEm: #fff; $colorGenBg: #222; -$colorHeadBg: rgba($colorBodyBg, .5); +$colorHeadBg: rgba($colorBodyBg, 0.5); $colorHeadFg: $colorBodyFg; -$colorKey: #1C67E3; +$colorKey: #1c67e3; $colorKeyBg: #015fca; $colorKeyFg: #fff; // Darker version of colorKey for use in major buttons $colorKeyHov: lighten($colorKey, 10%); $colorKeyBgHov: lighten($colorKeyBg, 10%); -$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%) contrast(200%); +$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%) + contrast(200%); $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); $colorKeySelectedBg: $colorKey; @@ -148,7 +149,7 @@ $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: darken($colorBodyFg, .8); +$colorSelectedFg: darken($colorBodyFg, 0.8); $colorSelectedGlow: rgba($colorKeyFg, 0.58); // Glow around selected item // Body constants @@ -173,11 +174,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7); $colorStatusFg: #888; $colorStatusDefault: #ccc; $colorStatusInfo: #60ba7b; -$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%); +$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) + contrast(92%); $colorStatusAlert: #ffb66c; -$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%); +$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) + contrast(101%); $colorStatusError: #da0004; -$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%); +$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) + contrast(115%); $colorStatusBtnBg: #666; // Where is this used? $colorStatusPartialBg: #3f5e8b; $colorStatusCompleteBg: #457638; @@ -235,7 +239,7 @@ $timeConductorActivePanBg: #226074; // Browse $browseFrameColor: pullForward($colorBodyBg, 10%); -$browseFrameBorder: 1px solid rgb(89, 89, 89, .4); // Frames in Disp and Flex Layouts when frame is showing +$browseFrameBorder: 1px solid rgb(89, 89, 89, 0.4); // Frames in Disp and Flex Layouts when frame is showing $browseSelectableShdwHov: rgba($colorBodyFg, 0) 0 0 3px; $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); $filterItemHoverFg: brightness(1.2) contrast(1.1); @@ -243,17 +247,20 @@ $interiorMarginObjectFrameVertical: 10px; $interiorMarginObjectFrameHorizontal: 10px; $layoutCornerSize: 5px; -// Missing Items +// Missing Items $filterItemMissing: brightness(0.6) grayscale(1); $opacityMissing: 0.5; $borderMissing: 1px dashed $colorAlert !important; $browseFrameCornerColor: $colorKey 4px; //Color used for the corners of frames - + // Edit $editUIColor: $uiColor; // Base color $editUIColorBg: $editUIColor; $editUIColorFg: #fff; -$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color +$editUIColorHov: pullForward( + saturate($uiColor, 10%), + 10% +); // Hover color when $editUIColor is applied as a base color $editUIBaseColor: #344b8d; // Base color, toolbar bg $editUIBaseColorHov: pullForward($editUIBaseColor, 20%); $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc. @@ -272,7 +279,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px; $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color -$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text +$editFrameMovebarColorFg: pullForward( + $editFrameMovebarColorBg, + 20% +); // Grippy lines, container size text $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%); $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style @@ -377,13 +387,13 @@ $colorInspectorBg: $colorBodyBg; $colorInspectorFg: $colorBodyFg; $colorInspectorPropName: $colorBodyFg; $colorInspectorPropVal: pullForward($colorInspectorFg, 15%); -$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, .9); +$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 0.9); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 80%); // Tabs $colorTabBg: #2c2c34; $colorTabFg: $colorBodyFgEm; -$colorTabCurrentBg: radial-gradient(circle, rgba($colorKey,0.8) 58%, rgba(0,59,156,1) 100%); +$colorTabCurrentBg: radial-gradient(circle, rgba($colorKey, 0.8) 58%, rgba(0, 59, 156, 1) 100%); $colorTabCurrentFg: $colorBodyFgEm; $colorTabsBaseline: $colorBodyBg; @@ -414,7 +424,7 @@ $colorLimitYellowIc: #fdc707; $colorLimitOrangeBg: #b36b00; $colorLimitOrangeFg: #ffe0b2; $colorLimitOrangeIc: #ff9900; -$colorLimitRedBg: #B60109; +$colorLimitRedBg: #b60109; $colorLimitRedFg: #ffa489; $colorLimitRedIc: #ff4222; $colorLimitPurpleBg: #891bb3; @@ -425,7 +435,7 @@ $colorLimitCyanFg: #d3faff; $colorLimitCyanIc: #6bedff; // Events -$colorEventPurpleFg: #aB8fff; +$colorEventPurpleFg: #ab8fff; $colorEventRedFg: #ff9999; $colorEventOrangeFg: #ff8800; $colorEventYellowFg: #ffdb63; @@ -476,17 +486,17 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2); // Gauges $colorGaugeBase: $colorKeyBg; -$colorGaugeBg: rgba($colorGaugeBase, .35); // Gauge radial area background, meter background +$colorGaugeBg: rgba($colorGaugeBase, 0.35); // Gauge radial area background, meter background $colorGaugeValue: $colorKeyBg; // Gauge value graphic (radial sweep, bar) color $colorGaugeTextValue: #fff; // Radial gauge text value $colorGaugeMeterTextValue: #fff; // Meter text value, overlaid on value bar $colorGaugeRange: $colorBodyFg; // Range text color -$colorGaugeLimitHigh: rgba($colorLimitRedBg, .5); +$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.5); $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, .2); +$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%) @@ -539,7 +549,7 @@ $colorThumbHoverBg: $colorItemTreeHoverBg; // Scrollbar $scrollbarTrackSize: 7px; $scrollbarTrackShdw: rgba(#ffffff, 0.4) 0 1px 2px; -$scrollbarTrackColorBg: rgba($colorKey, .2); +$scrollbarTrackColorBg: rgba($colorKey, 0.2); $scrollbarThumbColor: darken($colorKeyBg, 15%); $scrollbarThumbColorHov: pushBack($colorKeyBg, 20%); $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);