Adjust minor BeatmapSetOverlay details to better match osu-web

osu.Game.Tests/Visual/Online/TestSceneBeatmapSetOverlayDetails.cs

@@ -5,9 +5,11 @@
 using System.Collections.Generic;
 using System.Linq;
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Utils;
 using osu.Game.Beatmaps;
+using osu.Game.Overlays;
 using osu.Game.Overlays.BeatmapSet;
 using osu.Game.Screens.Select.Details;
 
@@ -22,6 +24,9 @@ public class TestSceneBeatmapSetOverlayDetails : OsuTestScene
 
         private RatingsExposingDetails details;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         [SetUp]
         public void Setup() => Schedule(() =>
         {
@@ -55,8 +60,12 @@ public void TestMetrics()
                         {
                             Fails = Enumerable.Range(1, 100).Select(_ => RNG.Next(10)).ToArray(),
                             Retries = Enumerable.Range(-2, 100).Select(_ => RNG.Next(10)).ToArray(),
-                        }
+                        },
                     }
+                },
+                OnlineInfo = new BeatmapSetOnlineInfo
+                {
+                    Status = BeatmapSetOnlineStatus.Ranked
                 }
             };
         }

osu.Game.Tests/Visual/Online/TestSceneBeatmapSetOverlaySuccessRate.cs

@@ -5,11 +5,13 @@
 using System.Collections.Generic;
 using System.Linq;
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Utils;
 using osu.Game.Beatmaps;
+using osu.Game.Overlays;
 using osu.Game.Overlays.BeatmapSet;
 using osu.Game.Screens.Select.Details;
 using osuTK;
@@ -26,6 +28,9 @@ public class TestSceneBeatmapSetOverlaySuccessRate : OsuTestScene
 
         private GraphExposingSuccessRate successRate;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         [SetUp]
         public void Setup() => Schedule(() =>
         {

osu.Game.Tests/Visual/Online/TestSceneLeaderboardScopeSelector.cs

@@ -7,11 +7,16 @@
 using osu.Framework.Graphics;
 using osu.Framework.Bindables;
 using osu.Game.Screens.Select.Leaderboards;
+using osu.Framework.Allocation;
+using osu.Game.Overlays;
 
 namespace osu.Game.Tests.Visual.Online
 {
     public class TestSceneLeaderboardScopeSelector : OsuTestScene
     {
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         public override IReadOnlyList<Type> RequiredTypes => new[]
         {
             typeof(LeaderboardScopeSelector),

osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs

@@ -13,6 +13,7 @@ namespace osu.Game.Beatmaps.Drawables
     public class BeatmapSetOnlineStatusPill : CircularContainer
     {
         private readonly OsuSpriteText statusText;
+        private readonly Box background;
 
         private BeatmapSetOnlineStatus status;
 
@@ -43,14 +44,20 @@ public MarginPadding TextPadding
             set => statusText.Padding = value;
         }
 
+        public Color4 BackgroundColour
+        {
+            get => background.Colour;
+            set => background.Colour = value;
+        }
+
         public BeatmapSetOnlineStatusPill()
         {
             AutoSizeAxes = Axes.Both;
             Masking = true;
 
             Children = new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
                     Colour = Color4.Black,

osu.Game/Graphics/UserInterface/GradientLineTabControl.cs

@@ -49,14 +49,7 @@ private class GradientLine : GridContainer
             public GradientLine()
             {
                 RelativeSizeAxes = Axes.X;
-                Size = new Vector2(0.8f, 1.5f);
-
-                ColumnDimensions = new[]
-                {
-                    new Dimension(),
-                    new Dimension(mode: GridSizeMode.Relative, size: 0.4f),
-                    new Dimension(),
-                };
+                Size = new Vector2(0.8f, 1f);
 
                 Content = new[]
                 {
@@ -65,16 +58,12 @@ public GradientLine()
                         new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Colour = ColourInfo.GradientHorizontal(Color4.Transparent, Color4.White)
-                        },
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
+                            Colour = ColourInfo.GradientHorizontal(Color4.Transparent, Colour)
                         },
                         new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Colour = ColourInfo.GradientHorizontal(Color4.White, Color4.Transparent)
+                            Colour = ColourInfo.GradientHorizontal(Colour, Color4.Transparent)
                         },
                     }
                 };

osu.Game/Overlays/BeatmapSet/Buttons/HeaderDownloadButton.cs

@@ -150,7 +150,7 @@ private void load(IAPIProvider api, BeatmapManager beatmaps)
                             },
                             new OsuSpriteText
                             {
-                                Text = BeatmapSet.Value.OnlineInfo.HasVideo && noVideo ? "without Video" : string.Empty,
+                                Text = getVideoSuffixText(),
                                 Font = OsuFont.GetFont(size: 11, weight: FontWeight.Bold)
                             },
                         };
@@ -163,5 +163,13 @@ private void load(IAPIProvider api, BeatmapManager beatmaps)
         private void userChanged(ValueChangedEvent<User> e) => button.Enabled.Value = !(e.NewValue is GuestUser);
 
         private void enabledChanged(ValueChangedEvent<bool> e) => this.FadeColour(e.NewValue ? Color4.White : Color4.Gray, 200, Easing.OutQuint);
+
+        private string getVideoSuffixText()
+        {
+            if (!BeatmapSet.Value.OnlineInfo.HasVideo)
+                return string.Empty;
+
+            return noVideo ? "without Video" : "with Video";
+        }
     }
 }

osu.Game/Overlays/BeatmapSet/Buttons/PreviewButton.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -14,15 +13,14 @@
 using osu.Game.Graphics.Containers;
 using osu.Game.Overlays.Direct;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.BeatmapSet.Buttons
 {
     public class PreviewButton : OsuClickableContainer
     {
         private const float transition_duration = 500;
 
-        private readonly Box bg, progress;
+        private readonly Box background, progress;
         private readonly PlayButton playButton;
 
         private PreviewTrack preview => playButton.Preview;
@@ -40,10 +38,10 @@ public PreviewButton()
 
             Children = new Drawable[]
             {
-                bg = new Box
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.Black.Opacity(0.25f),
+                    Alpha = 0.5f
                 },
                 new Container
                 {
@@ -71,9 +69,10 @@ public PreviewButton()
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OsuColour colours, OverlayColourProvider colourProvider)
         {
             progress.Colour = colours.Yellow;
+            background.Colour = colourProvider.Background6;
         }
 
         protected override void Update()
@@ -91,13 +90,13 @@ protected override void Update()
 
         protected override bool OnHover(HoverEvent e)
         {
-            bg.FadeColour(Color4.Black.Opacity(0.5f), 100);
+            background.FadeTo(0.75f, 80);
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            bg.FadeColour(Color4.Black.Opacity(0.25f), 100);
+            background.FadeTo(0.5f, 80);
             base.OnHoverLost(e);
         }
     }

osu.Game/Overlays/BeatmapSet/Details.cs

@@ -2,15 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
 using osu.Game.Overlays.BeatmapSet.Buttons;
 using osu.Game.Screens.Select.Details;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.BeatmapSet
 {
@@ -21,6 +19,7 @@ public class Details : FillFlowContainer
         private readonly PreviewButton preview;
         private readonly BasicStats basic;
         private readonly AdvancedStats advanced;
+        private readonly DetailBox ratingBox;
 
         private BeatmapSetInfo beatmapSet;
 
@@ -54,6 +53,7 @@ public BeatmapInfo Beatmap
         private void updateDisplay()
         {
             Ratings.Metrics = BeatmapSet?.Metrics;
+            ratingBox.Alpha = BeatmapSet?.OnlineInfo?.Status > 0 ? 1 : 0;
         }
 
         public Details()
@@ -86,7 +86,7 @@ public Details()
                         Margin = new MarginPadding { Vertical = 7.5f },
                     },
                 },
-                new DetailBox
+                ratingBox = new DetailBox
                 {
                     Child = Ratings = new UserRatings
                     {
@@ -107,6 +107,8 @@ private void load()
         private class DetailBox : Container
         {
             private readonly Container content;
+            private readonly Box background;
+
             protected override Container<Drawable> Content => content;
 
             public DetailBox()
@@ -116,10 +118,10 @@ public DetailBox()
 
                 InternalChildren = new Drawable[]
                 {
-                    new Box
+                    background = new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = Color4.Black.Opacity(0.5f),
+                        Alpha = 0.5f
                     },
                     content = new Container
                     {
@@ -129,6 +131,12 @@ public DetailBox()
                     },
                 };
             }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                background.Colour = colourProvider.Background6;
+            }
         }
     }
 }

osu.Game/Overlays/BeatmapSet/Header.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
 using System.Linq;
@@ -30,6 +30,7 @@ public class Header : BeatmapDownloadTrackingComposite
         private const float buttons_spacing = 5;
 
         private readonly UpdateableBeatmapSetCover cover;
+        private readonly Box coverGradient;
         private readonly OsuSpriteText title, artist;
         private readonly AuthorInfo author;
         private readonly FillFlowContainer downloadButtonsContainer;
@@ -93,10 +94,9 @@ public Header()
                                         RelativeSizeAxes = Axes.Both,
                                         Masking = true,
                                     },
-                                    new Box
+                                    coverGradient = new Box
                                     {
-                                        RelativeSizeAxes = Axes.Both,
-                                        Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.3f), Color4.Black.Opacity(0.8f)),
+                                        RelativeSizeAxes = Axes.Both
                                     },
                                 },
                             },
@@ -106,8 +106,7 @@ public Header()
                                 AutoSizeAxes = Axes.Y,
                                 Padding = new MarginPadding
                                 {
-                                    Top = 20,
-                                    Bottom = 30,
+                                    Vertical = BeatmapSetOverlay.Y_PADDING,
                                     Left = BeatmapSetOverlay.X_PADDING,
                                     Right = BeatmapSetOverlay.X_PADDING + BeatmapSetOverlay.RIGHT_WIDTH,
                                 },
@@ -130,11 +129,12 @@ public Header()
                                             {
                                                 Direction = FillDirection.Horizontal,
                                                 AutoSizeAxes = Axes.Both,
+                                                Margin = new MarginPadding { Top = 15 },
                                                 Children = new Drawable[]
                                                 {
                                                     title = new OsuSpriteText
                                                     {
-                                                        Font = OsuFont.GetFont(size: 37, weight: FontWeight.Bold, italics: true)
+                                                        Font = OsuFont.GetFont(size: 30, weight: FontWeight.SemiBold, italics: true)
                                                     },
                                                     externalLink = new ExternalLinkButton
                                                     {
@@ -144,7 +144,7 @@ public Header()
                                                     },
                                                 }
                                             },
-                                            artist = new OsuSpriteText { Font = OsuFont.GetFont(size: 25, weight: FontWeight.SemiBold, italics: true) },
+                                            artist = new OsuSpriteText { Font = OsuFont.GetFont(size: 20, weight: FontWeight.Medium, italics: true) },
                                             new Container
                                             {
                                                 RelativeSizeAxes = Axes.X,
@@ -187,7 +187,7 @@ public Header()
                                 Anchor = Anchor.BottomRight,
                                 Origin = Anchor.BottomRight,
                                 AutoSizeAxes = Axes.Both,
-                                Margin = new MarginPadding { Top = BeatmapSetOverlay.TOP_PADDING, Right = BeatmapSetOverlay.X_PADDING },
+                                Margin = new MarginPadding { Top = BeatmapSetOverlay.Y_PADDING, Right = BeatmapSetOverlay.X_PADDING },
                                 Direction = FillDirection.Vertical,
                                 Spacing = new Vector2(10),
                                 Children = new Drawable[]
@@ -197,7 +197,7 @@ public Header()
                                         Anchor = Anchor.TopRight,
                                         Origin = Anchor.TopRight,
                                         TextSize = 14,
-                                        TextPadding = new MarginPadding { Horizontal = 25, Vertical = 8 }
+                                        TextPadding = new MarginPadding { Horizontal = 35, Vertical = 10 }
                                     },
                                     Details = new Details(),
                                 },
@@ -215,8 +215,11 @@ public Header()
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
+            coverGradient.Colour = ColourInfo.GradientVertical(colourProvider.Background6.Opacity(0.3f), colourProvider.Background6.Opacity(0.8f));
+            onlineStatusPill.BackgroundColour = colourProvider.Background6;
+
             State.BindValueChanged(_ => updateDownloadButtons());
 
             BeatmapSet.BindValueChanged(setInfo =>