diff --git a/changelog/unreleased/37490 b/changelog/unreleased/37490 new file mode 100644 index 000000000000..eb67b1d1f345 --- /dev/null +++ b/changelog/unreleased/37490 @@ -0,0 +1,8 @@ +Enhancement: Change the behavior of the header menus + +- Dynamically adjusting the width of the left menu +- Changed the centering of the icons +- Automatic wrap to a second line after the third entry +- Hover effect in the left and right menu + +https://github.com/owncloud/core/pull/37490 diff --git a/core/css/header.css b/core/css/header.css index 5ca64908e1eb..a7eb73d16943 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -179,10 +179,11 @@ position: fixed; top: 45px; left: 10px; - width: 265px; + width: auto; + max-width: 265px; max-height: 85%; margin-top: 0; - padding-bottom: 10px; + padding: 6px; background-color: rgba(0, 0, 0, .97); box-shadow: 0 1px 10px rgba(50, 50, 50, .7); border-radius: 3px; @@ -227,7 +228,13 @@ height: 80px; display: inline-block; text-align: center; - padding: 20px 0; + padding: 13px 0; +} +#navigation a:hover { + background: rgb(51, 47, 46, 0.7); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; } #navigation a span { display: inline-block; @@ -394,26 +401,32 @@ border-top-right-radius: 0; box-sizing: border-box; } - #expanddiv a { - display: block; - height: 40px; - color: #fff; - padding: 4px 12px 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity: .7; - box-sizing: border-box; - } - #expanddiv a img { - margin-bottom: -3px; - margin-right: 6px; - } - #expanddiv a:hover, - #expanddiv a:focus, - #expanddiv a:active, - #expanddiv a.active { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; - } +#expanddiv a { + display: block; + height: 40px; + color: #fff; + padding: 4px 12px 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + opacity: .7; + box-sizing: border-box; +} +#expanddiv a img { + margin-bottom: -3px; + margin-right: 6px; +} +#expanddiv a:hover, +#expanddiv a:focus, +#expanddiv a:active, +#expanddiv a.active { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} +#expanddiv a:hover { + background: rgb(51, 47, 46, 0.7); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* do not show display name when profile picture is present */ #header .avatardiv.avatardiv-shown + #expandDisplayName {