diff --git a/src/theme/ItaliaTheme/Views/_common.scss b/src/theme/ItaliaTheme/Views/_common.scss index 32ca3040c..229e8dfbe 100644 --- a/src/theme/ItaliaTheme/Views/_common.scss +++ b/src/theme/ItaliaTheme/Views/_common.scss @@ -68,14 +68,39 @@ picture.volto-image.responsive img.full-width, margin-left: -50vw !important; object-fit: cover; + $toolbar-width: 80px; + $toolbar-collapsed-width: 20px; + $sidebar-width: 375px; + $sidebar-collapsed-width: 20px; + .has-toolbar & { - left: calc(50% + 40px); - width: calc(100vw - 80px) !important; + left: calc(50% + calc($toolbar-width / 2)); + width: calc(100vw - $toolbar-width) !important; + } + .has-toolbar.has-sidebar & { + $toolbars-width: calc($toolbar-width + $sidebar-width); + left: calc(50% + calc($toolbars-width / 2)); + width: calc(100vw - $toolbars-width) !important; + } + .has-toolbar.has-sidebar-collapsed & { + $toolbars-width: calc($toolbar-width + $sidebar-collapsed-width); + left: calc(50% + calc($toolbars-width / 2)); + width: calc(100vw - $toolbars-width) !important; } .has-toolbar-collapsed & { - left: calc(50% + 10px); - width: calc(100vw - 20px) !important; + left: calc(50% + calc($toolbar-collapsed-width / 2)); + width: calc(100vw - $toolbar-collapsed-width) !important; + } + .has-toolbar-collapsed.has-sidebar & { + $toolbars-width: calc($toolbar-collapsed-width + $sidebar-width); + left: calc(50% + calc($toolbars-width / 2)); + width: calc(100vw - $toolbars-width) !important; + } + .has-toolbar-collapsed.has-sidebar-collapsed & { + $toolbars-width: calc($toolbar-collapsed-width + $sidebar-collapsed-width); + left: calc(50% + calc($toolbars-width / 2)); + width: calc(100vw - $toolbars-width) !important; } }