From 0133a5e2f7b091b7cec2c5e5ab20ded9cb06b29a Mon Sep 17 00:00:00 2001
From: Ayke Halder <mail@ayke-halder.de>
Date: Tue, 12 Mar 2024 17:01:52 +0100
Subject: [PATCH] [BUGFIX] Visualize CEs with surrounding box-shadow
In the backend CEs are elevated by a surrounding box-shadow.
This box-shadow was clipped off on top, left and right side.
Resolves: #103381
Releases: main, 12.4
Change-Id: I3052ff7ced18e509aefb2f05c6b1bde8725572b5
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83445
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Garvin Hicking <gh@faktor-e.de>
Reviewed-by: Garvin Hicking <gh@faktor-e.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/module/_page.scss | 2 +-
typo3/sysext/backend/Resources/Public/Css/backend.css | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/Build/Sources/Sass/module/_page.scss b/Build/Sources/Sass/module/_page.scss
index 9b954deea0d1..17e2ea0c90f3 100644
--- a/Build/Sources/Sass/module/_page.scss
+++ b/Build/Sources/Sass/module/_page.scss
@@ -142,7 +142,6 @@ html {
position: relative;
margin: var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);
transition: height .4s ease-out;
- overflow: hidden;
&.active-drag {
z-index: 4500;
@@ -162,6 +161,7 @@ html {
border-radius: var(--pagemodule-element-border-radius);
box-shadow: var(--pagemodule-element-box-shadow);
margin-bottom: var(--pagemodule-grid-spacing);
+ overflow: hidden;
.t3-page-ce-hidden & {
opacity: .5;
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index de97e2314501..0a9a7da00da0 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -4390,10 +4390,10 @@ html{scroll-behavior:smooth}
.t3-page-column-header-icons:hover{opacity:1}
.t3-page-lang-copyce{margin:var(--pagemodule-grid-spacing)}
.t3-page-lang-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.t3-page-ce{display:block;position:relative;margin:var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);transition:height .4s ease-out;overflow:hidden}
+.t3-page-ce{display:block;position:relative;margin:var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);transition:height .4s ease-out}
.t3-page-ce.active-drag{z-index:4500}
.t3-page-ce[data-dragdrop-clone] .t3-page-ce-element{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}
-.t3-page-ce-element{border:1px solid var(--pagemodule-element-bg);background-color:var(--pagemodule-element-bg);border-radius:var(--pagemodule-element-border-radius);box-shadow:var(--pagemodule-element-box-shadow);margin-bottom:var(--pagemodule-grid-spacing)}
+.t3-page-ce-element{border:1px solid var(--pagemodule-element-bg);background-color:var(--pagemodule-element-bg);border-radius:var(--pagemodule-element-border-radius);box-shadow:var(--pagemodule-element-box-shadow);margin-bottom:var(--pagemodule-grid-spacing);overflow:hidden}
.t3-page-ce-hidden .t3-page-ce-element{opacity:.5;border:1px dashed rgba(0,0,0,.5);background-color:var(--pagemodule-element-hidden-bg);box-shadow:none;transition:opacity .3s ease-in-out}
.t3-page-ce-hidden .t3-page-ce-element:hover{opacity:1}
.t3-page-ce-warning .t3-page-ce-element{border:1px solid var(--pagemodule-element-warning-border-color);background-color:var(--pagemodule-element-warning-bg);box-shadow:none}
--
GitLab