diff --git a/themes/neue-dark-ui/panels.less b/themes/neue-dark-ui/panels.less index 832387f36..060064bc3 100644 --- a/themes/neue-dark-ui/panels.less +++ b/themes/neue-dark-ui/panels.less @@ -1,6 +1,22 @@ @import "ui-mixins"; @import "ui-variables"; +.panel-heading { + margin: 0; + border-bottom: none; + padding: @component-padding - 2px @component-padding; + + font-size: @font-size-base; + line-height: 1; + + background-color: transparent; + background-image: linear-gradient(@inset-panel-background-highlight-color, fadeout(@tool-panel-background-highlight-color, 1%)); +} + +.inset-panel { + background-color: @inset-panel-background-color; +} + .tool-panel { .text(normal); @@ -19,10 +35,18 @@ &.panel-left { border-right: 1px solid @tool-panel-border-color; } -} -.inset-panel { - background-color: @inset-panel-background-color; + .inset-panel { + border-radius: @component-border-radius; + + border: 1px solid @tool-panel-border-color; + border-bottom-color: @tool-panel-border-highlight-color; + border-right-color: @tool-panel-border-highlight-color; + + .panel-heading { + margin-right: 1px; + } + } } .is-blurred { diff --git a/themes/neue-dark-ui/ui-variables.less b/themes/neue-dark-ui/ui-variables.less index d8a6a2aeb..2d4a79663 100644 --- a/themes/neue-dark-ui/ui-variables.less +++ b/themes/neue-dark-ui/ui-variables.less @@ -23,6 +23,7 @@ @tool-panel-border-highlight-color: rgba(255, 255, 255, 0.05); @inset-panel-background-color: #161719; +@inset-panel-background-highlight-color: rgba(255, 255, 255, 0.07); @button-color: #303030; @button-color-hover: #353536; @@ -43,3 +44,5 @@ @component-icon-padding: @line-height-base / 4; @component-line-height: @line-height-base * 1.25; + +@component-border-radius: 2px;