Merge remote-tracking branch 'refs/remotes/ppy/master' into overlay-scroll-container

osu.Game.Rulesets.Mania.Tests/Skinning/ManiaSkinnableTestScene.cs

@@ -31,6 +31,7 @@ namespace osu.Game.Rulesets.Mania.Tests.Skinning
         {
             typeof(ManiaRuleset),
             typeof(ManiaLegacySkinTransformer),
+            typeof(ManiaSettingsSubsection)
         };
 
         protected override Ruleset CreateRulesetForSkinProvider() => new ManiaRuleset();

osu.Game.Rulesets.Mania.Tests/Skinning/TestSceneStageBackground.cs

@@ -0,0 +1,35 @@
+// 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;
+using System.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Rulesets.Mania.Skinning;
+using osu.Game.Rulesets.Mania.UI.Components;
+using osu.Game.Skinning;
+
+namespace osu.Game.Rulesets.Mania.Tests.Skinning
+{
+    public class TestSceneStageBackground : ManiaSkinnableTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => base.RequiredTypes.Concat(new[]
+        {
+            typeof(DefaultStageBackground),
+            typeof(LegacyStageBackground),
+        }).ToList();
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground), _ => new DefaultStageBackground())
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                RelativeSizeAxes = Axes.Both,
+                Width = 0.5f,
+            });
+        }
+    }
+}

osu.Game.Rulesets.Mania.Tests/Skinning/TestSceneStageForeground.cs

@@ -0,0 +1,33 @@
+// 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;
+using System.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Rulesets.Mania.Skinning;
+using osu.Game.Skinning;
+
+namespace osu.Game.Rulesets.Mania.Tests.Skinning
+{
+    public class TestSceneStageForeground : ManiaSkinnableTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => base.RequiredTypes.Concat(new[]
+        {
+            typeof(LegacyStageForeground),
+        }).ToList();
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground), _ => null)
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                RelativeSizeAxes = Axes.Both,
+                Width = 0.5f,
+            });
+        }
+    }
+}

osu.Game.Rulesets.Mania/ManiaSkinComponent.cs

@@ -39,6 +39,8 @@ namespace osu.Game.Rulesets.Mania
         HoldNoteHead,
         HoldNoteTail,
         HoldNoteBody,
-        HitExplosion
+        HitExplosion,
+        StageBackground,
+        StageForeground,
     }
 }

osu.Game.Rulesets.Mania/Skinning/LegacyStageBackground.cs

@@ -0,0 +1,61 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Skinning;
+using osuTK;
+
+namespace osu.Game.Rulesets.Mania.Skinning
+{
+    public class LegacyStageBackground : LegacyManiaElement
+    {
+        private Drawable leftSprite;
+        private Drawable rightSprite;
+
+        public LegacyStageBackground()
+        {
+            RelativeSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(ISkinSource skin)
+        {
+            string leftImage = GetManiaSkinConfig<string>(skin, LegacyManiaSkinConfigurationLookups.LeftStageImage)?.Value
+                               ?? "mania-stage-left";
+
+            string rightImage = GetManiaSkinConfig<string>(skin, LegacyManiaSkinConfigurationLookups.RightStageImage)?.Value
+                                ?? "mania-stage-right";
+
+            InternalChildren = new[]
+            {
+                leftSprite = new Sprite
+                {
+                    Anchor = Anchor.TopLeft,
+                    Origin = Anchor.TopRight,
+                    X = 0.05f,
+                    Texture = skin.GetTexture(leftImage),
+                },
+                rightSprite = new Sprite
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopLeft,
+                    X = -0.05f,
+                    Texture = skin.GetTexture(rightImage)
+                }
+            };
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (leftSprite?.Height > 0)
+                leftSprite.Scale = new Vector2(DrawHeight / leftSprite.Height);
+
+            if (rightSprite?.Height > 0)
+                rightSprite.Scale = new Vector2(DrawHeight / rightSprite.Height);
+        }
+    }
+}

osu.Game.Rulesets.Mania/Skinning/LegacyStageForeground.cs

@@ -0,0 +1,56 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Rulesets.UI.Scrolling;
+using osu.Game.Skinning;
+using osuTK;
+
+namespace osu.Game.Rulesets.Mania.Skinning
+{
+    public class LegacyStageForeground : LegacyManiaElement
+    {
+        private readonly IBindable<ScrollingDirection> direction = new Bindable<ScrollingDirection>();
+
+        private Drawable sprite;
+
+        public LegacyStageForeground()
+        {
+            RelativeSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(ISkinSource skin, IScrollingInfo scrollingInfo)
+        {
+            string bottomImage = GetManiaSkinConfig<string>(skin, LegacyManiaSkinConfigurationLookups.BottomStageImage)?.Value
+                                 ?? "mania-stage-bottom";
+
+            sprite = skin.GetAnimation(bottomImage, true, true)?.With(d =>
+            {
+                if (d == null)
+                    return;
+
+                d.Scale = new Vector2(1.6f);
+            });
+
+            if (sprite != null)
+                InternalChild = sprite;
+
+            direction.BindTo(scrollingInfo.Direction);
+            direction.BindValueChanged(onDirectionChanged, true);
+        }
+
+        private void onDirectionChanged(ValueChangedEvent<ScrollingDirection> direction)
+        {
+            if (sprite == null)
+                return;
+
+            if (direction.NewValue == ScrollingDirection.Up)
+                sprite.Anchor = sprite.Origin = Anchor.TopCentre;
+            else
+                sprite.Anchor = sprite.Origin = Anchor.BottomCentre;
+        }
+    }
+}

osu.Game.Rulesets.Mania/Skinning/ManiaLegacySkinTransformer.cs

@@ -81,6 +81,12 @@ namespace osu.Game.Rulesets.Mania.Skinning
 
                         case ManiaSkinComponents.HitExplosion:
                             return new LegacyHitExplosion();
+
+                        case ManiaSkinComponents.StageBackground:
+                            return new LegacyStageBackground();
+
+                        case ManiaSkinComponents.StageForeground:
+                            return new LegacyStageForeground();
                     }
 
                     break;

osu.Game.Rulesets.Mania/UI/Components/DefaultStageBackground.cs

@@ -0,0 +1,30 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Mania.UI.Components
+{
+    public class DefaultStageBackground : CompositeDrawable
+    {
+        public DefaultStageBackground()
+        {
+            RelativeSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            InternalChild = new Box
+            {
+                Name = "Background",
+                RelativeSizeAxes = Axes.Both,
+                Colour = Color4.Black
+            };
+        }
+    }
+}

osu.Game.Rulesets.Mania/UI/Stage.cs

@@ -6,7 +6,6 @@ using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Game.Rulesets.Judgements;
 using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Rulesets.Mania.Objects;
@@ -72,11 +71,9 @@ namespace osu.Game.Rulesets.Mania.UI
                     AutoSizeAxes = Axes.X,
                     Children = new Drawable[]
                     {
-                        new Box
+                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground), _ => new DefaultStageBackground())
                         {
-                            Name = "Background",
+                            RelativeSizeAxes = Axes.Both
-                            RelativeSizeAxes = Axes.Both,
-                            Colour = Color4.Black
                         },
                         columnFlow = new FillFlowContainer<Column>
                         {
@@ -103,6 +100,10 @@ namespace osu.Game.Rulesets.Mania.UI
                                 RelativeSizeAxes = Axes.Y,
                             }
                         },
+                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground), _ => null)
+                        {
+                            RelativeSizeAxes = Axes.Both
+                        },
                         judgements = new JudgementContainer<DrawableManiaJudgement>
                         {
                             Anchor = Anchor.TopCentre,

osu.Game.Tests/Visual/UserInterface/TestSceneOverlayHeader.cs

@@ -8,7 +8,6 @@ using System.Collections.Generic;
 using osu.Framework.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Framework.Allocation;
-using osu.Game.Graphics.UserInterface;
 using osu.Framework.Graphics.Shapes;
 using osuTK.Graphics;
 
@@ -100,21 +99,21 @@ namespace osu.Game.Tests.Visual.UserInterface
 
         private class TestNoBackgroundHeader : OverlayHeader
         {
-            protected override ScreenTitle CreateTitle() => new TestTitle();
+            protected override OverlayTitle CreateTitle() => new TestTitle();
         }
 
         private class TestNoControlHeader : OverlayHeader
         {
             protected override Drawable CreateBackground() => new OverlayHeaderBackground(@"Headers/changelog");
 
-            protected override ScreenTitle CreateTitle() => new TestTitle();
+            protected override OverlayTitle CreateTitle() => new TestTitle();
         }
 
         private class TestStringTabControlHeader : TabControlOverlayHeader<string>
         {
             protected override Drawable CreateBackground() => new OverlayHeaderBackground(@"Headers/news");
 
-            protected override ScreenTitle CreateTitle() => new TestTitle();
+            protected override OverlayTitle CreateTitle() => new TestTitle();
 
             protected override Drawable CreateTitleContent() => new OverlayRulesetSelector();
 
@@ -129,7 +128,7 @@ namespace osu.Game.Tests.Visual.UserInterface
         {
             protected override Drawable CreateBackground() => new OverlayHeaderBackground(@"Headers/rankings");
 
-            protected override ScreenTitle CreateTitle() => new TestTitle();
+            protected override OverlayTitle CreateTitle() => new TestTitle();
         }
 
         private enum TestEnum
@@ -141,7 +140,7 @@ namespace osu.Game.Tests.Visual.UserInterface
 
         private class TestBreadcrumbControlHeader : BreadcrumbControlOverlayHeader
         {
-            protected override ScreenTitle CreateTitle() => new TestTitle();
+            protected override OverlayTitle CreateTitle() => new TestTitle();
 
             public TestBreadcrumbControlHeader()
             {
@@ -151,15 +150,13 @@ namespace osu.Game.Tests.Visual.UserInterface
             }
         }
 
-        private class TestTitle : ScreenTitle
+        private class TestTitle : OverlayTitle
         {
             public TestTitle()
             {
                 Title = "title";
-                Section = "section";
+                IconTexture = "Icons/changelog";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
         }
     }
 }

osu.Game/Graphics/UserInterface/OsuTabControl.cs

@@ -113,13 +113,13 @@ namespace osu.Game.Graphics.UserInterface
 
             private const float transition_length = 500;
 
-            private void fadeActive()
+            protected void FadeHovered()
             {
                 Bar.FadeIn(transition_length, Easing.OutQuint);
                 Text.FadeColour(Color4.White, transition_length, Easing.OutQuint);
             }
 
-            private void fadeInactive()
+            protected void FadeUnhovered()
             {
                 Bar.FadeOut(transition_length, Easing.OutQuint);
                 Text.FadeColour(AccentColour, transition_length, Easing.OutQuint);
@@ -128,14 +128,14 @@ namespace osu.Game.Graphics.UserInterface
             protected override bool OnHover(HoverEvent e)
             {
                 if (!Active.Value)
-                    fadeActive();
+                    FadeHovered();
                 return true;
             }
 
             protected override void OnHoverLost(HoverLostEvent e)
             {
                 if (!Active.Value)
-                    fadeInactive();
+                    FadeUnhovered();
             }
 
             [BackgroundDependencyLoader]
@@ -172,13 +172,19 @@ namespace osu.Game.Graphics.UserInterface
                     },
                     new HoverClickSounds()
                 };
-
-                Active.BindValueChanged(active => Text.Font = Text.Font.With(Typeface.Torus, weight: active.NewValue ? FontWeight.Bold : FontWeight.Medium), true);
             }
 
-            protected override void OnActivated() => fadeActive();
+            protected override void OnActivated()
+            {
+                Text.Font = Text.Font.With(weight: FontWeight.Bold);
+                FadeHovered();
+            }
 
-            protected override void OnDeactivated() => fadeInactive();
+            protected override void OnDeactivated()
+            {
+                Text.Font = Text.Font.With(weight: FontWeight.Medium);
+                FadeUnhovered();
+            }
         }
     }
 }

osu.Game/Graphics/UserInterface/ScreenTitle.cs

@@ -1,102 +0,0 @@
-// 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;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.Sprites;
-using osu.Game.Graphics.Sprites;
-using osuTK;
-using osuTK.Graphics;
-
-namespace osu.Game.Graphics.UserInterface
-{
-    public abstract class ScreenTitle : CompositeDrawable, IHasAccentColour
-    {
-        public const float ICON_WIDTH = ICON_SIZE + spacing;
-
-        public const float ICON_SIZE = 25;
-        private const float spacing = 6;
-        private const int text_offset = 2;
-
-        private SpriteIcon iconSprite;
-        private readonly OsuSpriteText titleText, pageText;
-
-        protected IconUsage Icon
-        {
-            set
-            {
-                if (iconSprite == null)
-                    throw new InvalidOperationException($"Cannot use {nameof(Icon)} with a custom {nameof(CreateIcon)} function.");
-
-                iconSprite.Icon = value;
-            }
-        }
-
-        protected string Title
-        {
-            set => titleText.Text = value;
-        }
-
-        protected string Section
-        {
-            set => pageText.Text = value;
-        }
-
-        public Color4 AccentColour
-        {
-            get => pageText.Colour;
-            set => pageText.Colour = value;
-        }
-
-        protected virtual Drawable CreateIcon() => iconSprite = new SpriteIcon
-        {
-            Size = new Vector2(ICON_SIZE),
-        };
-
-        protected ScreenTitle()
-        {
-            AutoSizeAxes = Axes.Both;
-
-            InternalChildren = new Drawable[]
-            {
-                new FillFlowContainer
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Spacing = new Vector2(spacing, 0),
-                    Direction = FillDirection.Horizontal,
-                    Children = new[]
-                    {
-                        CreateIcon().With(t =>
-                        {
-                            t.Anchor = Anchor.Centre;
-                            t.Origin = Anchor.Centre;
-                        }),
-                        titleText = new OsuSpriteText
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
-                            Margin = new MarginPadding { Bottom = text_offset }
-                        },
-                        new Circle
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Size = new Vector2(4),
-                            Colour = Color4.Gray,
-                        },
-                        pageText = new OsuSpriteText
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Font = OsuFont.GetFont(size: 20),
-                            Margin = new MarginPadding { Bottom = text_offset }
-                        }
-                    }
-                },
-            };
-        }
-    }
-}

osu.Game/Graphics/UserInterface/ScreenTitleTextureIcon.cs

@@ -1,40 +0,0 @@
-// 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 osu.Framework.Allocation;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Sprites;
-using osu.Framework.Graphics.Textures;
-using osuTK;
-
-namespace osu.Game.Graphics.UserInterface
-{
-    /// <summary>
-    /// A custom icon class for use with <see cref="ScreenTitle.CreateIcon()"/> based off a texture resource.
-    /// </summary>
-    public class ScreenTitleTextureIcon : CompositeDrawable
-    {
-        private readonly string textureName;
-
-        public ScreenTitleTextureIcon(string textureName)
-        {
-            this.textureName = textureName;
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(TextureStore textures)
-        {
-            Size = new Vector2(ScreenTitle.ICON_SIZE);
-
-            InternalChild = new Sprite
-            {
-                RelativeSizeAxes = Axes.Both,
-                Texture = textures.Get(textureName),
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                FillMode = FillMode.Fit
-            };
-        }
-    }
-}

osu.Game/Overlays/BeatmapListing/BeatmapListingHeader.cs

@@ -1,24 +1,19 @@
 // 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 osu.Framework.Graphics;
-using osu.Game.Graphics.UserInterface;
-
 namespace osu.Game.Overlays.BeatmapListing
 {
     public class BeatmapListingHeader : OverlayHeader
     {
-        protected override ScreenTitle CreateTitle() => new BeatmapListingTitle();
+        protected override OverlayTitle CreateTitle() => new BeatmapListingTitle();
 
-        private class BeatmapListingTitle : ScreenTitle
+        private class BeatmapListingTitle : OverlayTitle
         {
             public BeatmapListingTitle()
             {
-                Title = @"beatmap";
+                Title = "beatmap listing";
-                Section = @"listing";
+                IconTexture = "Icons/changelog";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
         }
     }
 }

osu.Game/Overlays/BeatmapSet/BeatmapSetHeader.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets;
 
 namespace osu.Game.Overlays.BeatmapSet
@@ -14,22 +13,20 @@ namespace osu.Game.Overlays.BeatmapSet
 
         public BeatmapRulesetSelector RulesetSelector { get; private set; }
 
-        protected override ScreenTitle CreateTitle() => new BeatmapHeaderTitle();
+        protected override OverlayTitle CreateTitle() => new BeatmapHeaderTitle();
 
         protected override Drawable CreateTitleContent() => RulesetSelector = new BeatmapRulesetSelector
         {
             Current = Ruleset
         };
 
-        private class BeatmapHeaderTitle : ScreenTitle
+        private class BeatmapHeaderTitle : OverlayTitle
         {
             public BeatmapHeaderTitle()
             {
-                Title = @"beatmap";
+                Title = "beatmap info";
-                Section = @"info";
+                IconTexture = "Icons/changelog";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
         }
     }
 }

osu.Game/Overlays/BreadcrumbControlOverlayHeader.cs

@@ -1,6 +1,7 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
@@ -16,6 +17,13 @@ namespace osu.Game.Overlays
             public OverlayHeaderBreadcrumbControl()
             {
                 RelativeSizeAxes = Axes.X;
+                Height = 47;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                AccentColour = colourProvider.Light2;
             }
 
             protected override TabItem<string> CreateTabItem(string value) => new ControlTabItem(value);
@@ -27,10 +35,18 @@ namespace osu.Game.Overlays
                 public ControlTabItem(string value)
                     : base(value)
                 {
+                    RelativeSizeAxes = Axes.Y;
                     Text.Font = Text.Font.With(size: 14);
-                    Chevron.Y = 3;
+                    Text.Anchor = Anchor.CentreLeft;
+                    Text.Origin = Anchor.CentreLeft;
+                    Chevron.Y = 1;
                     Bar.Height = 0;
                 }
+
+                // base OsuTabItem makes font bold on activation, we don't want that here
+                protected override void OnActivated() => FadeHovered();
+
+                protected override void OnDeactivated() => FadeUnhovered();
             }
         }
     }

osu.Game/Overlays/Changelog/ChangelogHeader.cs

@@ -9,7 +9,6 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API.Requests.Responses;
 
 namespace osu.Game.Overlays.Changelog
@@ -50,8 +49,6 @@ namespace osu.Game.Overlays.Changelog
             streamsBackground.Colour = colourProvider.Background5;
         }
 
-        private ChangelogHeaderTitle title;
-
         private void showBuild(ValueChangedEvent<APIChangelogBuild> e)
         {
             if (e.OldValue != null)
@@ -63,14 +60,11 @@ namespace osu.Game.Overlays.Changelog
                 Current.Value = e.NewValue.ToString();
 
                 updateCurrentStream();
-
-                title.Version = e.NewValue.UpdateStream.DisplayName;
             }
             else
             {
                 Current.Value = listing_string;
                 Streams.Current.Value = null;
-                title.Version = null;
             }
         }
 
@@ -100,7 +94,7 @@ namespace osu.Game.Overlays.Changelog
             }
         };
 
-        protected override ScreenTitle CreateTitle() => title = new ChangelogHeaderTitle();
+        protected override OverlayTitle CreateTitle() => new ChangelogHeaderTitle();
 
         public void Populate(List<APIUpdateStream> streams)
         {
@@ -116,20 +110,13 @@ namespace osu.Game.Overlays.Changelog
             Streams.Current.Value = Streams.Items.FirstOrDefault(s => s.Name == Build.Value.UpdateStream.Name);
         }
 
-        private class ChangelogHeaderTitle : ScreenTitle
+        private class ChangelogHeaderTitle : OverlayTitle
         {
-            public string Version
-            {
-                set => Section = value ?? listing_string;
-            }
-
             public ChangelogHeaderTitle()
             {
                 Title = "changelog";
-                Version = null;
+                IconTexture = "Icons/changelog";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
         }
     }
 }

osu.Game/Overlays/News/NewsHeader.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
-using osu.Game.Graphics.UserInterface;
 using System;
 
 namespace osu.Game.Overlays.News
@@ -12,8 +11,6 @@ namespace osu.Game.Overlays.News
     {
         private const string front_page_string = "frontpage";
 
-        private NewsHeaderTitle title;
-
         public readonly Bindable<string> Post = new Bindable<string>(null);
 
         public Action ShowFrontPage;
@@ -40,36 +37,24 @@ namespace osu.Game.Overlays.News
             {
                 TabControl.AddItem(e.NewValue);
                 Current.Value = e.NewValue;
-
-                title.IsReadingPost = true;
             }
             else
             {
                 Current.Value = front_page_string;
-                title.IsReadingPost = false;
             }
         }
 
         protected override Drawable CreateBackground() => new OverlayHeaderBackground(@"Headers/news");
 
-        protected override ScreenTitle CreateTitle() => title = new NewsHeaderTitle();
+        protected override OverlayTitle CreateTitle() => new NewsHeaderTitle();
 
-        private class NewsHeaderTitle : ScreenTitle
+        private class NewsHeaderTitle : OverlayTitle
         {
-            private const string post_string = "post";
-
-            public bool IsReadingPost
-            {
-                set => Section = value ? post_string : front_page_string;
-            }
-
             public NewsHeaderTitle()
             {
                 Title = "news";
-                IsReadingPost = false;
+                IconTexture = "Icons/news";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/news");
         }
     }
 }

osu.Game/Overlays/OverlayHeader.cs

@@ -6,7 +6,6 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics.UserInterface;
 using osuTK.Graphics;
 
 namespace osu.Game.Overlays
@@ -14,7 +13,6 @@ namespace osu.Game.Overlays
     public abstract class OverlayHeader : Container
     {
         private readonly Box titleBackground;
-        private readonly ScreenTitle title;
 
         protected readonly FillFlowContainer HeaderInfo;
 
@@ -57,11 +55,10 @@ namespace osu.Game.Overlays
                                         Padding = new MarginPadding
                                         {
                                             Horizontal = UserProfileOverlay.CONTENT_X_MARGIN,
-                                            Vertical = 10,
                                         },
                                         Children = new[]
                                         {
-                                            title = CreateTitle().With(title =>
+                                            CreateTitle().With(title =>
                                             {
                                                 title.Anchor = Anchor.CentreLeft;
                                                 title.Origin = Anchor.CentreLeft;
@@ -86,7 +83,6 @@ namespace osu.Game.Overlays
         private void load(OverlayColourProvider colourProvider)
         {
             titleBackground.Colour = colourProvider.Dark5;
-            title.AccentColour = colourProvider.Highlight1;
         }
 
         [NotNull]
@@ -96,11 +92,11 @@ namespace osu.Game.Overlays
         protected virtual Drawable CreateBackground() => Empty();
 
         /// <summary>
-        /// Creates a <see cref="Drawable"/> on the opposite side of the <see cref="ScreenTitle"/>. Used mostly to create <see cref="OverlayRulesetSelector"/>.
+        /// Creates a <see cref="Drawable"/> on the opposite side of the <see cref="OverlayTitle"/>. Used mostly to create <see cref="OverlayRulesetSelector"/>.
         /// </summary>
         [NotNull]
         protected virtual Drawable CreateTitleContent() => Empty();
 
-        protected abstract ScreenTitle CreateTitle();
+        protected abstract OverlayTitle CreateTitle();
     }
 }

osu.Game/Overlays/OverlayRulesetSelector.cs

@@ -22,7 +22,7 @@ namespace osu.Game.Overlays
         {
             AutoSizeAxes = Axes.Both,
             Direction = FillDirection.Horizontal,
-            Spacing = new Vector2(25, 0),
+            Spacing = new Vector2(20, 0),
         };
     }
 }

osu.Game/Overlays/OverlayRulesetTabItem.cs

@@ -12,6 +12,7 @@ using osu.Game.Rulesets;
 using osuTK.Graphics;
 using osuTK;
 using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
 
 namespace osu.Game.Overlays
 {
@@ -53,6 +54,8 @@ namespace osu.Game.Overlays
                         Origin = Anchor.Centre,
                         Anchor = Anchor.Centre,
                         Text = value.Name,
+                        Font = OsuFont.GetFont(size: 14),
+                        ShadowColour = Color4.Black.Opacity(0.75f)
                     }
                 },
                 new HoverClickSounds()

osu.Game/Overlays/OverlayTabControl.cs

@@ -1,6 +1,7 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
@@ -35,17 +36,22 @@ namespace osu.Game.Overlays
         protected OverlayTabControl()
         {
             TabContainer.Masking = false;
-            TabContainer.Spacing = new Vector2(15, 0);
+            TabContainer.Spacing = new Vector2(20, 0);
 
             AddInternal(bar = new Box
             {
                 RelativeSizeAxes = Axes.X,
-                Height = 2,
                 Anchor = Anchor.BottomLeft,
-                Origin = Anchor.CentreLeft
+                Origin = Anchor.BottomLeft
             });
         }
 
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            AccentColour = colourProvider.Highlight1;
+        }
+
         protected override Dropdown<T> CreateDropdown() => null;
 
         protected override TabItem<T> CreateTabItem(T value) => new OverlayTabItem(value);
@@ -90,7 +96,7 @@ namespace osu.Game.Overlays
                     Bar = new ExpandingBar
                     {
                         Anchor = Anchor.BottomCentre,
-                        ExpandedSize = 7.5f,
+                        ExpandedSize = 5f,
                         CollapsedSize = 0
                     },
                     new HoverClickSounds()
@@ -119,6 +125,7 @@ namespace osu.Game.Overlays
             {
                 HoverAction();
                 Text.Font = Text.Font.With(weight: FontWeight.Bold);
+                Text.FadeColour(Color4.White, 120, Easing.InQuad);
             }
 
             protected override void OnDeactivated()
@@ -135,11 +142,7 @@ namespace osu.Game.Overlays
                     OnDeactivated();
             }
 
-            protected virtual void HoverAction()
+            protected virtual void HoverAction() => Bar.Expand();
-            {
-                Bar.Expand();
-                Text.FadeColour(Color4.White, 120, Easing.InQuad);
-            }
 
             protected virtual void UnhoverAction()
             {

osu.Game/Overlays/OverlayTitle.cs

@@ -0,0 +1,80 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osuTK;
+
+namespace osu.Game.Overlays
+{
+    public abstract class OverlayTitle : CompositeDrawable
+    {
+        private readonly OsuSpriteText title;
+        private readonly Container icon;
+
+        protected string Title
+        {
+            set => title.Text = value;
+        }
+
+        protected string IconTexture
+        {
+            set => icon.Child = new OverlayTitleIcon(value);
+        }
+
+        protected OverlayTitle()
+        {
+            AutoSizeAxes = Axes.Both;
+
+            InternalChild = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Both,
+                Spacing = new Vector2(10, 0),
+                Direction = FillDirection.Horizontal,
+                Children = new Drawable[]
+                {
+                    icon = new Container
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Margin = new MarginPadding { Horizontal = 5 }, // compensates for osu-web sprites having around 5px of whitespace on each side
+                        Size = new Vector2(30)
+                    },
+                    title = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.GetFont(size: 20, weight: FontWeight.Regular),
+                        Margin = new MarginPadding { Vertical = 17.5f } // 15px padding + 2.5px line-height difference compensation
+                    }
+                }
+            };
+        }
+
+        private class OverlayTitleIcon : Sprite
+        {
+            private readonly string textureName;
+
+            public OverlayTitleIcon(string textureName)
+            {
+                this.textureName = textureName;
+
+                RelativeSizeAxes = Axes.Both;
+                Anchor = Anchor.Centre;
+                Origin = Anchor.Centre;
+                FillMode = FillMode.Fit;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(TextureStore textures)
+            {
+                Texture = textures.Get(textureName);
+            }
+        }
+    }
+}

osu.Game/Overlays/Profile/ProfileHeader.cs

@@ -7,7 +7,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Profile.Header;
 using osu.Game.Users;
 
@@ -87,19 +86,17 @@ namespace osu.Game.Overlays.Profile
             }
         };
 
-        protected override ScreenTitle CreateTitle() => new ProfileHeaderTitle();
+        protected override OverlayTitle CreateTitle() => new ProfileHeaderTitle();
 
         private void updateDisplay(User user) => coverContainer.User = user;
 
-        private class ProfileHeaderTitle : ScreenTitle
+        private class ProfileHeaderTitle : OverlayTitle
         {
             public ProfileHeaderTitle()
             {
-                Title = "player";
+                Title = "player info";
-                Section = "info";
+                IconTexture = "Icons/profile";
-            }
+            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/profile");
         }
     }
 }

osu.Game/Overlays/Rankings/RankingsOverlayHeader.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Graphics;
 using osu.Framework.Bindables;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets;
 using osu.Game.Users;
 
@@ -18,33 +17,21 @@ namespace osu.Game.Overlays.Rankings
         private OverlayRulesetSelector rulesetSelector;
         private CountryFilter countryFilter;
 
-        protected override ScreenTitle CreateTitle() => new RankingsTitle
+        protected override OverlayTitle CreateTitle() => new RankingsTitle();
-        {
-            Scope = { BindTarget = Current }
-        };
 
         protected override Drawable CreateTitleContent() => rulesetSelector = new OverlayRulesetSelector();
 
         protected override Drawable CreateContent() => countryFilter = new CountryFilter();
 
-        protected override Drawable CreateBackground() => new OverlayHeaderBackground(@"Headers/rankings");
+        protected override Drawable CreateBackground() => new OverlayHeaderBackground("Headers/rankings");
 
-        private class RankingsTitle : ScreenTitle
+        private class RankingsTitle : OverlayTitle
         {
-            public readonly Bindable<RankingsScope> Scope = new Bindable<RankingsScope>();
-
             public RankingsTitle()
             {
                 Title = "ranking";
+                IconTexture = "Icons/rankings";
             }
-
-            protected override void LoadComplete()
-            {
-                base.LoadComplete();
-                Scope.BindValueChanged(scope => Section = scope.NewValue.ToString().ToLowerInvariant(), true);
-            }
-
-            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/rankings");
         }
     }
 

osu.Game/Overlays/TabControlOverlayHeader.cs

@@ -10,7 +10,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
-using osuTK;
 
 namespace osu.Game.Overlays
 {
@@ -22,6 +21,7 @@ namespace osu.Game.Overlays
     {
         protected OsuTabControl<T> TabControl;
 
+        private readonly Box controlBackground;
         private readonly BindableWithCurrent<T> current = new BindableWithCurrent<T>();
 
         public Bindable<T> Current
@@ -30,8 +30,6 @@ namespace osu.Game.Overlays
             set => current.Current = value;
         }
 
-        private readonly Box controlBackground;
-
         protected TabControlOverlayHeader()
         {
             HeaderInfo.Add(new Container
@@ -56,7 +54,6 @@ namespace osu.Game.Overlays
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)
         {
-            TabControl.AccentColour = colourProvider.Highlight1;
             controlBackground.Colour = colourProvider.Dark4;
         }
 
@@ -65,14 +62,16 @@ namespace osu.Game.Overlays
 
         public class OverlayHeaderTabControl : OverlayTabControl<T>
         {
+            private const float bar_height = 1;
+
             public OverlayHeaderTabControl()
             {
-                BarHeight = 1;
                 RelativeSizeAxes = Axes.None;
                 AutoSizeAxes = Axes.X;
                 Anchor = Anchor.BottomLeft;
                 Origin = Anchor.BottomLeft;
-                Height = 35;
+                Height = 47;
+                BarHeight = bar_height;
             }
 
             protected override TabItem<T> CreateTabItem(T value) => new OverlayHeaderTabItem(value);
@@ -82,7 +81,6 @@ namespace osu.Game.Overlays
                 RelativeSizeAxes = Axes.Y,
                 AutoSizeAxes = Axes.X,
                 Direction = FillDirection.Horizontal,
-                Spacing = new Vector2(5, 0),
             };
 
             private class OverlayHeaderTabItem : OverlayTabItem
@@ -92,7 +90,8 @@ namespace osu.Game.Overlays
                 {
                     Text.Text = value.ToString().ToLower();
                     Text.Font = OsuFont.GetFont(size: 14);
-                    Bar.ExpandedSize = 5;
+                    Text.Margin = new MarginPadding { Vertical = 16.5f }; // 15px padding + 1.5px line-height difference compensation
+                    Bar.Margin = new MarginPadding { Bottom = bar_height };
                 }
             }
         }

osu.Game/Overlays/UserProfileOverlay.cs

@@ -24,7 +24,7 @@ namespace osu.Game.Overlays
         private GetUserRequest userReq;
         protected ProfileHeader Header;
         private ProfileSectionsContainer sectionsContainer;
-        private ProfileTabControl tabs;
+        private ProfileSectionTabControl tabs;
 
         public const float CONTENT_X_MARGIN = 70;
 
@@ -62,12 +62,11 @@ namespace osu.Game.Overlays
                 }
                 : Array.Empty<ProfileSection>();
 
-            tabs = new ProfileTabControl
+            tabs = new ProfileSectionTabControl
             {
                 RelativeSizeAxes = Axes.X,
                 Anchor = Anchor.TopCentre,
                 Origin = Anchor.TopCentre,
-                Height = 34
             };
 
             Add(new Box
@@ -149,19 +148,24 @@ namespace osu.Game.Overlays
             }
         }
 
-        private class ProfileTabControl : OverlayTabControl<ProfileSection>
+        private class ProfileSectionTabControl : OverlayTabControl<ProfileSection>
         {
-            public ProfileTabControl()
+            private const float bar_height = 2;
+
+            public ProfileSectionTabControl()
             {
                 TabContainer.RelativeSizeAxes &= ~Axes.X;
                 TabContainer.AutoSizeAxes |= Axes.X;
                 TabContainer.Anchor |= Anchor.x1;
                 TabContainer.Origin |= Anchor.x1;
+
+                Height = 36 + bar_height;
+                BarHeight = bar_height;
             }
 
-            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileTabItem(value)
+            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileSectionTabItem(value)
             {
-                AccentColour = AccentColour
+                AccentColour = AccentColour,
             };
 
             [BackgroundDependencyLoader]
@@ -170,12 +174,16 @@ namespace osu.Game.Overlays
                 AccentColour = colourProvider.Highlight1;
             }
 
-            private class ProfileTabItem : OverlayTabItem
+            private class ProfileSectionTabItem : OverlayTabItem
             {
-                public ProfileTabItem(ProfileSection value)
+                public ProfileSectionTabItem(ProfileSection value)
                     : base(value)
                 {
                     Text.Text = value.Title;
+                    Text.Font = Text.Font.With(size: 16);
+                    Text.Margin = new MarginPadding { Bottom = 10 + bar_height };
+                    Bar.ExpandedSize = 10;
+                    Bar.Margin = new MarginPadding { Bottom = bar_height };
                 }
             }
         }

osu.Game/Screens/Multi/Header.cs

@@ -6,10 +6,13 @@ using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
 using osu.Framework.Screens;
 using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.SearchableList;
+using osu.Game.Graphics.Sprites;
+using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Screens.Multi
@@ -43,7 +46,7 @@ namespace osu.Game.Screens.Multi
                         {
                             Anchor = Anchor.CentreLeft,
                             Origin = Anchor.BottomLeft,
-                            X = -ScreenTitle.ICON_WIDTH,
+                            X = -MultiHeaderTitle.ICON_WIDTH,
                         },
                         breadcrumbs = new HeaderBreadcrumbControl(stack)
                         {
@@ -70,18 +73,78 @@ namespace osu.Game.Screens.Multi
             breadcrumbs.StripColour = colours.Green;
         }
 
-        private class MultiHeaderTitle : ScreenTitle
+        private class MultiHeaderTitle : CompositeDrawable, IHasAccentColour
         {
+            public const float ICON_WIDTH = icon_size + spacing;
+
+            private const float icon_size = 25;
+            private const float spacing = 6;
+            private const int text_offset = 2;
+
+            private readonly SpriteIcon iconSprite;
+            private readonly OsuSpriteText title, pageText;
+
             public IMultiplayerSubScreen Screen
             {
-                set => Section = value.ShortTitle.ToLowerInvariant();
+                set => pageText.Text = value.ShortTitle.ToLowerInvariant();
+            }
+
+            public Color4 AccentColour
+            {
+                get => pageText.Colour;
+                set => pageText.Colour = value;
+            }
+
+            public MultiHeaderTitle()
+            {
+                AutoSizeAxes = Axes.Both;
+
+                InternalChildren = new Drawable[]
+                {
+                    new FillFlowContainer
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Spacing = new Vector2(spacing, 0),
+                        Direction = FillDirection.Horizontal,
+                        Children = new Drawable[]
+                        {
+                            iconSprite = new SpriteIcon
+                            {
+                                Size = new Vector2(icon_size),
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre
+                            },
+                            title = new OsuSpriteText
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
+                                Margin = new MarginPadding { Bottom = text_offset }
+                            },
+                            new Circle
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Size = new Vector2(4),
+                                Colour = Color4.Gray,
+                            },
+                            pageText = new OsuSpriteText
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Font = OsuFont.GetFont(size: 20),
+                                Margin = new MarginPadding { Bottom = text_offset }
+                            }
+                        }
+                    },
+                };
             }
 
             [BackgroundDependencyLoader]
             private void load(OsuColour colours)
             {
-                Title = "multi";
+                title.Text = "multi";
-                Icon = OsuIcon.Multi;
+                iconSprite.Icon = OsuIcon.Multi;
                 AccentColour = colours.Yellow;
             }
         }

osu.Game/Skinning/LegacyManiaSkinConfigurationLookup.cs

@@ -40,6 +40,9 @@ namespace osu.Game.Skinning
         JudgementLineColour,
         ColumnBackgroundColour,
         ColumnLightColour,
-        MinimumColumnWidth
+        MinimumColumnWidth,
+        LeftStageImage,
+        RightStageImage,
+        BottomStageImage
     }
 }

osu.Game/Skinning/LegacySkin.cs

@@ -243,6 +243,12 @@ namespace osu.Game.Skinning
                 case LegacyManiaSkinConfigurationLookups.KeyImageDown:
                     Debug.Assert(maniaLookup.TargetColumn != null);
                     return SkinUtils.As<TValue>(getManiaImage(existing, $"KeyImage{maniaLookup.TargetColumn}D"));
+
+                case LegacyManiaSkinConfigurationLookups.LeftStageImage:
+                    return SkinUtils.As<TValue>(getManiaImage(existing, "StageLeft"));
+
+                case LegacyManiaSkinConfigurationLookups.RightStageImage:
+                    return SkinUtils.As<TValue>(getManiaImage(existing, "StageRight"));
             }
 
             return null;