diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c4cc463d3ce..7e7865b6b88 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -253,6 +253,7 @@ $infoBackground: $blue-dark; // popover $popover-bg: $panel-bg; $popover-color: $text-color; +$popover-border-color: $gray-1; $popover-help-bg: $btn-secondary-bg; $popover-help-color: $text-color; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index c089be378b4..a10f94afc1b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -278,6 +278,7 @@ $infoBorder: transparent; // popover $popover-bg: $gray-5; $popover-color: $text-color; +$popover-border-color: $gray-3; $popover-help-bg: $blue-dark; $popover-help-color: $gray-6; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 7349a8c7c5d..6ed94c560a0 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -6,8 +6,8 @@ $attachmentOffset: 0%; $easing: cubic-bezier(0, 0, 0.265, 1.00); @include drop-theme("error", $errorBackground, $popover-color); -@include drop-theme("popover", $popover-bg, $popover-color, #b3460d); -@include drop-theme("help", $popover-bg, $popover-color, #b3460d); +@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color); +@include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); @include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing); diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index f0adf6aae96..7aa51fff256 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -1,5 +1,5 @@ -@mixin drop-theme($themeName, $theme-bg, $theme-color, $border-color: $theme-color) { +@mixin drop-theme($themeName, $theme-bg, $theme-color, $border-color: $theme-bg) { .drop-element.drop-#{$themeName} { max-width: 100%; max-height: 100%; @@ -15,7 +15,10 @@ word-wrap: break-word; max-width: 20rem; border: 1px solid $border-color; - box-shadow: 0 0 15px #5d3000; + + @if $theme-bg != $border-color { + box-shadow: 0 0 15px $border-color; + } &:before { content: "";