diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less index 20d6c425a4..ac329f176c 100644 --- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less +++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less @@ -30,6 +30,10 @@ margin-left: @spacing-02; z-index: 1; } + .review-panel-entry:hover { + // shadow-sm + box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16); + } .review-panel-entry.review-panel-entry-disabled { opacity: 0.5; @@ -47,10 +51,14 @@ gap: @spacing-04; } - .review-panel-entry-focused, - .review-panel-entry-highlighted { + .review-panel-entry.review-panel-entry-focused, + .review-panel-entry.review-panel-entry-highlighted { margin-left: @spacing-01; border: 1px solid @blue-50; + // shadow-md + box-shadow: + 0px 4px 12px rgba(30, 37, 48, 0.12), + 0px 2px 4px rgba(30, 37, 48, 0.08); } .review-panel-entry-header { diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss index 14d2ee2afc..31bf1b4954 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss @@ -36,6 +36,10 @@ z-index: 1; } + .review-panel-entry:hover { + @include shadow-sm; + } + .review-panel-entry.review-panel-entry-disabled { opacity: 0.5; pointer-events: none; @@ -52,10 +56,12 @@ gap: var(--spacing-04); } - .review-panel-entry-focused, - .review-panel-entry-highlighted { + .review-panel-entry.review-panel-entry-focused, + .review-panel-entry.review-panel-entry-highlighted { margin-left: var(--spacing-01); border: 1px solid var(--border-active); + + @include shadow-md; } .review-panel-entry-header {