diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 70493a4363d..1567d8c5d61 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -98,6 +98,11 @@ $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191 $panel-header-hover-bg: $dark-4; $panel-header-menu-hover-bg: $dark-5; +// page header +$page-header-bg: linear-gradient(90deg, #292a2d, black); +$page-header-shadow: inset 0px -4px 14px $dark-2; +$page-header-border-color: $dark-4; + $divider-border-color: #555; // Graphite Target Editor @@ -276,7 +281,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); // popover -$popover-bg: $panel-bg; +$popover-bg: $page-bg; $popover-color: $text-color; $popover-border-color: $dark-4; $popover-shadow: 0 0 20px black; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index f33ef4debed..78c0ba3bf61 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -70,6 +70,7 @@ $text-shadow-faint: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); $page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%); +$page-header-bg: linear-gradient(90deg, #292a2d, black); // Links // ------------------------- @@ -103,6 +104,11 @@ $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $panel-header-hover-bg: $gray-6; $panel-header-menu-hover-bg: $gray-4; +// Page header +$page-header-bg: linear-gradient(90deg, #292a2d, black); +$page-header-shadow: inset 0px -4px 14px $dark-2; +$page-header-border-color: $dark-4; + $divider-border-color: $gray-2; // Graphite Target Editor @@ -290,7 +296,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-info-bg: $blue-dark; // popover -$popover-bg: $panel-bg; +$popover-bg: $page-bg; $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 137afc11bd7..81009d20f3c 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -23,7 +23,7 @@ position: fixed; z-index: $zindex-modal; width: 100%; - background-color: $panel-bg; + background: $page-bg; @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); @include background-clip(padding-box); outline: none; @@ -37,13 +37,10 @@ } .modal-header { - background-color: $body-bg; - @include brand-bottom-border(); - @include clearfix(); - - .gf-tabs-link.active { - background-color: $panel-bg; - } + background: $page-header-bg; + box-shadow: $page-header-shadow; + border-bottom: 1px solid $page-header-border-color; + @include clearfix(); } .modal-header-title { diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 1d5268472bf..b6f44be1c18 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -1,8 +1,8 @@ .page-header-canvas { - background: linear-gradient(90deg, #292a2d, black); - box-shadow: inset 0px -4px 14px $dark-2; - border-bottom: 1px solid $dark-4; + background: $page-header-bg; + box-shadow: $page-header-shadow; + border-bottom: 1px solid $page-header-border-color; } .page-header { diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index f1bb69efd98..a174cc8f805 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -11,7 +11,6 @@ background: $theme-bg; color: $theme-color; padding: 0.65rem; - font-size: $font-size-sm; word-wrap: break-word; max-width: 20rem; border: 1px solid $border-color;