Improvement: Added Outline to Custom Scoreboard (#1461)

Co-authored-by: J10a1n15 <45315647+j10a1n15@users.noreply.github.com>
Co-authored-by: hannibal2 <24389977+hannibal00212@users.noreply.github.com>

10 files changed, 292 insertions, 65 deletions

diff --git a/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundConfig.java b/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundConfig.java
index 262988af7..18ffd3c58 100644
--- a/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundConfig.java
+++ b/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundConfig.java
@@ -1,6 +1,7 @@
 package at.hannibal2.skyhanni.config.features.gui.customscoreboard;
 
 import com.google.gson.annotations.Expose;
+import io.github.notenoughupdates.moulconfig.annotations.Accordion;
 import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorBoolean;
 import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorColour;
 import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorInfoText;
@@ -49,6 +50,11 @@ public class BackgroundConfig {
     public int roundedCornerSmoothness = 10;
 
     @Expose
+    @ConfigOption(name = "Background Outline", desc = "")
+    @Accordion
+    public BackgroundOutlineConfig outline = new BackgroundOutlineConfig();
+
+    @Expose
     @ConfigOption(
         name = "Use Custom Background Image",
         desc = "Put that image into a resource pack, using the path \"skyhanni/scoreboard.png\"."
diff --git a/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundOutlineConfig.java b/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundOutlineConfig.java
new file mode 100644
index 000000000..43795c2cd
--- /dev/null
+++ b/src/main/java/at/hannibal2/skyhanni/config/features/gui/customscoreboard/BackgroundOutlineConfig.java
@@ -0,0 +1,58 @@
+package at.hannibal2.skyhanni.config.features.gui.customscoreboard;
+
+import com.google.gson.annotations.Expose;
+import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorBoolean;
+import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorColour;
+import io.github.notenoughupdates.moulconfig.annotations.ConfigEditorSlider;
+import io.github.notenoughupdates.moulconfig.annotations.ConfigOption;
+
+public class BackgroundOutlineConfig {
+
+    @Expose
+    @ConfigOption(
+        name = "Outline",
+        desc = "Shows an outline around the scoreboard."
+    )
+    @ConfigEditorBoolean
+    public boolean enabled = false;
+
+    @Expose
+    @ConfigOption(
+        name = "Outline Thickness",
+        desc = "Thickness of the outline."
+    )
+    @ConfigEditorSlider(
+        minValue = 1,
+        maxValue = 15,
+        minStep = 1
+    )
+    public int thickness = 5;
+
+    @Expose
+    @ConfigOption(
+        name = "Outline Blur",
+        desc = "Amount that the outline is blurred."
+    )
+    @ConfigEditorSlider(
+        minValue = 0.0f,
+        maxValue = 1.0f,
+        minStep = 0.1f
+    )
+    public float blur = 0.7f;
+
+    @Expose
+    @ConfigOption(
+        name = "Outline Color Top",
+        desc = "Color of the top of the outline."
+    )
+    @ConfigEditorColour
+    public String colorTop = "0:255:175:89:255";
+
+    @Expose
+    @ConfigOption(
+        name = "Outline Color Bottom",
+        desc = "Color of the bottom of the outline."
+    )
+    @ConfigEditorColour
+    public String colorBottom = "0:255:127:237:255";
+}
diff --git a/src/main/java/at/hannibal2/skyhanni/features/gui/customscoreboard/RenderBackground.kt b/src/main/java/at/hannibal2/skyhanni/features/gui/customscoreboard/RenderBackground.kt
index 50a51042b..2454946f5 100644
--- a/src/main/java/at/hannibal2/skyhanni/features/gui/customscoreboard/RenderBackground.kt
+++ b/src/main/java/at/hannibal2/skyhanni/features/gui/customscoreboard/RenderBackground.kt
@@ -5,11 +5,8 @@ import at.hannibal2.skyhanni.data.GuiEditManager
 import at.hannibal2.skyhanni.data.GuiEditManager.Companion.getAbsX
 import at.hannibal2.skyhanni.data.GuiEditManager.Companion.getAbsY
 import at.hannibal2.skyhanni.data.GuiEditManager.Companion.getDummySize
-import at.hannibal2.skyhanni.features.gui.customscoreboard.CustomScoreboard.Companion.alignmentConfig
-import at.hannibal2.skyhanni.features.gui.customscoreboard.CustomScoreboard.Companion.backgroundConfig
-import at.hannibal2.skyhanni.features.gui.customscoreboard.CustomScoreboard.Companion.config
+import at.hannibal2.skyhanni.utils.ColorUtils.toChromaColor
 import at.hannibal2.skyhanni.utils.RenderUtils
-import at.hannibal2.skyhanni.utils.SpecialColour
 import io.github.moulberry.notenoughupdates.util.Utils
 import net.minecraft.client.Minecraft
 import net.minecraft.client.gui.ScaledResolution
@@ -19,7 +16,10 @@ import org.lwjgl.opengl.GL11
 
 class RenderBackground {
     fun renderBackground() {
-        val position = config.position
+        val alignmentConfig = CustomScoreboard.alignmentConfig
+        val backgroundConfig = CustomScoreboard.backgroundConfig
+        val outlineConfig = backgroundConfig.outline
+        val position = CustomScoreboard.config.position
         val border = backgroundConfig.borderSize
 
         val x = position.getAbsX()
@@ -36,14 +36,17 @@ class RenderBackground {
             alignmentConfig.alignRight
             || alignmentConfig.alignCenterVertically
         ) {
+            var newX = if (alignmentConfig.alignRight) scaledWidth - elementWidth - (border * 2) else x
+            val newY = if (alignmentConfig.alignCenterVertically) scaledHeight / 2 - elementHeight / 2 else y
+
+            if (outlineConfig.enabled) {
+                newX -= outlineConfig.thickness / 2
+            }
+
             position.set(
                 Position(
-                    if (alignmentConfig.alignRight)
-                        scaledWidth - elementWidth - (border * 2)
-                    else x,
-                    if (alignmentConfig.alignCenterVertically)
-                        scaledHeight / 2 - elementHeight / 2
-                    else y,
+                    newX,
+                    newY,
                     position.getScale(),
                     position.isCenter
                 )
@@ -76,9 +79,22 @@ class RenderBackground {
                     y - border,
                     elementWidth + border * 3,
                     elementHeight + border * 2,
-                    SpecialColour.specialToChromaRGB(backgroundConfig.color),
+                    backgroundConfig.color.toChromaColor().rgb,
                     backgroundConfig.roundedCornerSmoothness
                 )
+                if (outlineConfig.enabled) {
+                    RenderUtils.drawRoundRectOutline(
+                        x - border,
+                        y - border,
+                        elementWidth + border * 3,
+                        elementHeight + border * 2,
+                        outlineConfig.colorTop.toChromaColor().rgb,
+                        outlineConfig.colorBottom.toChromaColor().rgb,
+                        outlineConfig.thickness,
+                        backgroundConfig.roundedCornerSmoothness,
+                        outlineConfig.blur
+                    )
+                }
             }
         }
         GL11.glDepthMask(true)
diff --git a/src/main/java/at/hannibal2/skyhanni/features/misc/RoundedRectangleOutlineShader.kt b/src/main/java/at/hannibal2/skyhanni/features/misc/RoundedRectangleOutlineShader.kt
new file mode 100644
index 000000000..ea8770081
--- /dev/null
+++ b/src/main/java/at/hannibal2/skyhanni/features/misc/RoundedRectangleOutlineShader.kt
@@ -0,0 +1,30 @@
+package at.hannibal2.skyhanni.features.misc
+
+import at.hannibal2.skyhanni.utils.shader.Shader
+import at.hannibal2.skyhanni.utils.shader.Uniform
+import net.minecraft.client.Minecraft
+
+object RoundedRectangleOutlineShader : Shader("rounded_rect_outline", "rounded_rect_outline") {
+
+    val INSTANCE: RoundedRectangleOutlineShader
+        get() = this
+
+    var scaleFactor: Float = 0f
+    var radius: Float = 0f
+    var halfSize: FloatArray = floatArrayOf(0f, 0f)
+    var centerPos: FloatArray = floatArrayOf(0f, 0f)
+        set(value) {
+            field = floatArrayOf(value[0], Minecraft.getMinecraft().displayHeight - value[1])
+        }
+    var borderThickness: Float = 5f
+    var borderBlur: Float = 0.3f
+
+    override fun registerUniforms() {
+        registerUniform(Uniform.UniformType.FLOAT, "scaleFactor") { scaleFactor }
+        registerUniform(Uniform.UniformType.FLOAT, "radius") { radius }
+        registerUniform(Uniform.UniformType.VEC2, "halfSize") { halfSize }
+        registerUniform(Uniform.UniformType.VEC2, "centerPos") { centerPos }
+        registerUniform(Uniform.UniformType.FLOAT, "borderThickness") { borderThickness }
+        registerUniform(Uniform.UniformType.FLOAT, "borderBlur") { borderBlur }
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/at/hannibal2/skyhanni/utils/RenderUtils.kt b/src/main/java/at/hannibal2/skyhanni/utils/RenderUtils.kt
index 0ea8b76eb..b89850608 100644
--- a/src/main/java/at/hannibal2/skyhanni/utils/RenderUtils.kt
+++ b/src/main/java/at/hannibal2/skyhanni/utils/RenderUtils.kt
@@ -8,6 +8,7 @@ import at.hannibal2.skyhanni.data.GuiEditManager.Companion.getDummySize
 import at.hannibal2.skyhanni.events.GuiRenderItemEvent
 import at.hannibal2.skyhanni.events.LorenzRenderWorldEvent
 import at.hannibal2.skyhanni.events.RenderGuiItemOverlayEvent
+import at.hannibal2.skyhanni.features.misc.RoundedRectangleOutlineShader
 import at.hannibal2.skyhanni.features.misc.RoundedRectangleShader
 import at.hannibal2.skyhanni.test.command.ErrorManager
 import at.hannibal2.skyhanni.utils.renderables.Renderable
@@ -34,6 +35,7 @@ import net.minecraft.util.ResourceLocation
 import org.lwjgl.opengl.GL11
 import java.awt.Color
 import kotlin.math.cos
+import kotlin.math.max
 import kotlin.math.sin
 import kotlin.math.sqrt
 import kotlin.time.Duration
@@ -1472,7 +1474,7 @@ object RenderUtils {
      *
      * @param color color of rect
      * @param radius the radius of the corners (default 10)
-     * @param smoothness how smooth the corners will appear (default 2). NOTE: This does very
+     * @param smoothness how smooth the corners will appear (default 1). NOTE: This does very
      * little to the smoothness of the corners in reality due to how the final pixel color is calculated.
      * It is best kept at its default.
      */
@@ -1492,12 +1494,111 @@ object RenderUtils {
         GlStateManager.pushMatrix()
         ShaderManager.enableShader("rounded_rect")
 
-        Gui.drawRect(x, y, x + width, y + height, color)
+        Gui.drawRect(x - 5, y - 5, x + width + 5, y + height + 5, color)
 
         ShaderManager.disableShader()
         GlStateManager.popMatrix()
     }
 
+    /**
+     * Method to draw the outline of a rounded rectangle with a color gradient. For a single color just pass
+     * in the color to both topColor and bottomColor.
+     *
+     * This is *not* a method that draws a rounded rectangle **with** an outline, rather, this draws **only** the outline.
+     *
+     * **NOTE:** The same notices given from [drawRoundRect] should be acknowledged with this method also.
+     *
+     * @param topColor color of the top of the outline
+     * @param bottomColor color of the bottom of the outline
+     * @param borderThickness the thickness of the border
+     * @param radius radius of the corners of the rectangle (default 10)
+     * @param blur the amount to blur the outline (default 0.7f)
+     */
+    fun drawRoundRectOutline(
+        x: Int,
+        y: Int,
+        width: Int,
+        height: Int,
+        topColor: Int,
+        bottomColor: Int,
+        borderThickness: Int,
+        radius: Int = 10,
+        blur: Float = 0.7f,
+    ) {
+        val scaledRes = ScaledResolution(Minecraft.getMinecraft())
+        val widthIn = width * scaledRes.scaleFactor
+        val heightIn = height * scaledRes.scaleFactor
+        val xIn = x * scaledRes.scaleFactor
+        val yIn = y * scaledRes.scaleFactor
+
+        val borderAdjustment = borderThickness / 2
+
+        RoundedRectangleOutlineShader.scaleFactor = scaledRes.scaleFactor.toFloat()
+        RoundedRectangleOutlineShader.radius = radius.toFloat()
+        RoundedRectangleOutlineShader.halfSize = floatArrayOf(widthIn / 2f, heightIn / 2f)
+        RoundedRectangleOutlineShader.centerPos = floatArrayOf(xIn + (widthIn / 2f), yIn + (heightIn / 2f))
+        RoundedRectangleOutlineShader.borderThickness = borderThickness.toFloat()
+        // The blur argument is a bit misleading, the greater the value the more sharp the edges of the
+        // outline will be and the smaller the value the blurrier. So we take the difference from 1
+        // so the shader can blur the edges accordingly. This is because a 'blurriness' option makes more sense
+        // to users than a 'sharpness' option in this context
+        RoundedRectangleOutlineShader.borderBlur = max(1 - blur, 0f)
+
+        GlStateManager.pushMatrix()
+        ShaderManager.enableShader("rounded_rect_outline")
+
+        drawGradientRect(
+            x - borderAdjustment,
+            y - borderAdjustment,
+            x + width + borderAdjustment,
+            y + height + borderAdjustment,
+            topColor,
+            bottomColor
+        )
+
+        ShaderManager.disableShader()
+        GlStateManager.popMatrix()
+    }
+
+    fun drawGradientRect(
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+        startColor: Int = -0xfeffff0,
+        endColor: Int = -0xfeffff0,
+    ) {
+        val startAlpha = (startColor shr 24 and 255).toFloat() / 255.0f
+        val startRed = (startColor shr 16 and 255).toFloat() / 255.0f
+        val startGreen = (startColor shr 8 and 255).toFloat() / 255.0f
+        val startBlue = (startColor and 255).toFloat() / 255.0f
+        val endAlpha = (endColor shr 24 and 255).toFloat() / 255.0f
+        val endRed = (endColor shr 16 and 255).toFloat() / 255.0f
+        val endGreen = (endColor shr 8 and 255).toFloat() / 255.0f
+        val endBlue = (endColor and 255).toFloat() / 255.0f
+        GlStateManager.disableTexture2D()
+        GlStateManager.enableBlend()
+        GlStateManager.disableAlpha()
+        GlStateManager.tryBlendFuncSeparate(770, 771, 1, 0)
+        GlStateManager.shadeModel(7425)
+        val tessellator = Tessellator.getInstance()
+        val worldrenderer = tessellator.worldRenderer
+        worldrenderer.begin(7, DefaultVertexFormats.POSITION_COLOR)
+        worldrenderer.pos(right.toDouble(), top.toDouble(), 0.0)
+            .color(startRed, startGreen, startBlue, startAlpha).endVertex()
+        worldrenderer.pos(left.toDouble(), top.toDouble(), 0.0)
+            .color(startRed, startGreen, startBlue, startAlpha).endVertex()
+        worldrenderer.pos(left.toDouble(), bottom.toDouble(), 0.0)
+            .color(endRed, endGreen, endBlue, endAlpha).endVertex()
+        worldrenderer.pos(right.toDouble(), bottom.toDouble(), 0.0)
+            .color(endRed, endGreen, endBlue, endAlpha).endVertex()
+        tessellator.draw()
+        GlStateManager.shadeModel(7424)
+        GlStateManager.disableBlend()
+        GlStateManager.enableAlpha()
+        GlStateManager.enableTexture2D()
+    }
+
     // TODO move off of neu function
     fun drawTexturedRect(x: Float, y: Float) {
         with(ScaledResolution(Minecraft.getMinecraft())) {
diff --git a/src/main/java/at/hannibal2/skyhanni/utils/renderables/RenderLineTooltips.kt b/src/main/java/at/hannibal2/skyhanni/utils/renderables/RenderLineTooltips.kt
index cc5404039..09ab434d0 100644
--- a/src/main/java/at/hannibal2/skyhanni/utils/renderables/RenderLineTooltips.kt
+++ b/src/main/java/at/hannibal2/skyhanni/utils/renderables/RenderLineTooltips.kt
@@ -5,14 +5,12 @@ import at.hannibal2.skyhanni.utils.LorenzColor
 import at.hannibal2.skyhanni.utils.RenderUtils
 import at.hannibal2.skyhanni.utils.renderables.RenderableUtils.renderXAligned
 import io.github.moulberry.notenoughupdates.util.Utils
+import java.awt.Color
 import net.minecraft.client.Minecraft
 import net.minecraft.client.gui.ScaledResolution
 import net.minecraft.client.renderer.GlStateManager
 import net.minecraft.client.renderer.RenderHelper
-import net.minecraft.client.renderer.Tessellator
-import net.minecraft.client.renderer.vertex.DefaultVertexFormats
 import net.minecraft.item.ItemStack
-import java.awt.Color
 
 object RenderLineTooltips {
 
@@ -66,38 +64,38 @@ object RenderLineTooltips {
         val zLevel = 300f
         GlStateManager.translate(tooltipX.toFloat(), tooltipY.toFloat(), zLevel)
 
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = -4,
             right = tooltipTextWidth + 3,
             bottom = -3,
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = tooltipHeight + 3,
             right = tooltipTextWidth + 3,
             bottom = tooltipHeight + 4,
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = -3,
             right = tooltipTextWidth + 3,
             bottom = tooltipHeight + 3,
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -4,
             top = -3,
             right = -3,
             bottom = tooltipHeight + 3,
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = tooltipTextWidth + 3,
             top = -3,
             right = tooltipTextWidth + 4,
             bottom = tooltipHeight + 3,
         )
         val borderColorEnd = borderColorStart and 0xFEFEFE shr 1 or (borderColorStart and -0x1000000)
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = -3 + 1,
             right = -3 + 1,
@@ -105,7 +103,7 @@ object RenderLineTooltips {
             startColor = borderColorStart,
             endColor = borderColorEnd
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = tooltipTextWidth + 2,
             top = -3 + 1,
             right = tooltipTextWidth + 3,
@@ -113,7 +111,7 @@ object RenderLineTooltips {
             startColor = borderColorStart,
             endColor = borderColorEnd
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = -3,
             right = tooltipTextWidth + 3,
@@ -121,7 +119,7 @@ object RenderLineTooltips {
             startColor = borderColorStart,
             endColor = borderColorStart
         )
-        drawGradientRect(
+        RenderUtils.drawGradientRect(
             left = -3,
             top = tooltipHeight + 2,
             right = tooltipTextWidth + 3,
@@ -147,43 +145,4 @@ object RenderLineTooltips {
         GlStateManager.enableRescaleNormal()
         GlStateManager.disableLighting()
     }
-
-    private fun drawGradientRect(
-        left: Int,
-        top: Int,
-        right: Int,
-        bottom: Int,
-        startColor: Int = -0xfeffff0,
-        endColor: Int = -0xfeffff0,
-    ) {
-        val startAlpha = (startColor shr 24 and 255).toFloat() / 255.0f
-        val startRed = (startColor shr 16 and 255).toFloat() / 255.0f
-        val startGreen = (startColor shr 8 and 255).toFloat() / 255.0f
-        val startBlue = (startColor and 255).toFloat() / 255.0f
-        val endAlpha = (endColor shr 24 and 255).toFloat() / 255.0f
-        val endRed = (endColor shr 16 and 255).toFloat() / 255.0f
-        val endGreen = (endColor shr 8 and 255).toFloat() / 255.0f
-        val endBlue = (endColor and 255).toFloat() / 255.0f
-        GlStateManager.disableTexture2D()
-        GlStateManager.enableBlend()
-        GlStateManager.disableAlpha()
-        GlStateManager.tryBlendFuncSeparate(770, 771, 1, 0)
-        GlStateManager.shadeModel(7425)
-        val tessellator = Tessellator.getInstance()
-        val worldrenderer = tessellator.worldRenderer
-        worldrenderer.begin(7, DefaultVertexFormats.POSITION_COLOR)
-        worldrenderer.pos(right.toDouble(), top.toDouble(), 0.0)
-            .color(startRed, startGreen, startBlue, startAlpha).endVertex()
-        worldrenderer.pos(left.toDouble(), top.toDouble(), 0.0)
-            .color(startRed, startGreen, startBlue, startAlpha).endVertex()
-        worldrenderer.pos(left.toDouble(), bottom.toDouble(), 0.0)
-            .color(endRed, endGreen, endBlue, endAlpha).endVertex()
-        worldrenderer.pos(right.toDouble(), bottom.toDouble(), 0.0)
-            .color(endRed, endGreen, endBlue, endAlpha).endVertex()
-        tessellator.draw()
-        GlStateManager.shadeModel(7424)
-        GlStateManager.disableBlend()
-        GlStateManager.enableAlpha()
-        GlStateManager.enableTexture2D()
-    }
 }
diff --git a/src/main/java/at/hannibal2/skyhanni/utils/shader/Shader.kt b/src/main/java/at/hannibal2/skyhanni/utils/shader/Shader.kt
index 03b2fb3ac..8bbe5bba3 100644
--- a/src/main/java/at/hannibal2/skyhanni/utils/shader/Shader.kt
+++ b/src/main/java/at/hannibal2/skyhanni/utils/shader/Shader.kt
@@ -100,6 +100,12 @@ abstract class Shader(val vertex: String, val fragment: String) {
 
     fun disable() = ShaderHelper.glUseProgram(0)
 
+    /**
+     * @param uniformType Type of uniform, there should be a 1 to 1 equivalent to that in the shader file
+     * @param name The name of the uniform in the shader file. This should match exactly to the name given
+     * to the uniform in the shader file.
+     * @param uniformValuesSupplier The supplier that changes / sets the uniform's value
+     */
     fun <T> registerUniform(uniformType: Uniform.UniformType<T>, name: String, uniformValuesSupplier: Supplier<T>) {
         uniforms.add(Uniform(this, uniformType, name, uniformValuesSupplier))
     }
diff --git a/src/main/java/at/hannibal2/skyhanni/utils/shader/ShaderManager.kt b/src/main/java/at/hannibal2/skyhanni/utils/shader/ShaderManager.kt
index 3c6bc5ce0..3efcb0b77 100644
--- a/src/main/java/at/hannibal2/skyhanni/utils/shader/ShaderManager.kt
+++ b/src/main/java/at/hannibal2/skyhanni/utils/shader/ShaderManager.kt
@@ -2,6 +2,7 @@ package at.hannibal2.skyhanni.utils.shader
 
 import at.hannibal2.skyhanni.features.chroma.StandardChromaShader
 import at.hannibal2.skyhanni.features.chroma.TexturedChromaShader
+import at.hannibal2.skyhanni.features.misc.RoundedRectangleOutlineShader
 import at.hannibal2.skyhanni.features.misc.RoundedRectangleShader
 import at.hannibal2.skyhanni.test.command.ErrorManager
 import at.hannibal2.skyhanni.utils.LorenzUtils
@@ -25,6 +26,7 @@ object ShaderManager {
         STANDARD_CHROMA(StandardChromaShader.INSTANCE),
         TEXTURED_CHROMA(TexturedChromaShader.INSTANCE),
         ROUNDED_RECTANGLE(RoundedRectangleShader.INSTANCE),
+        ROUNDED_RECT_OUTLINE(RoundedRectangleOutlineShader.INSTANCE),
         ;
 
         companion object {
@@ -33,6 +35,7 @@ object ShaderManager {
                 "standard_chroma" -> STANDARD_CHROMA.shader
                 "textured_chroma" -> TEXTURED_CHROMA.shader
                 "rounded_rect" -> ROUNDED_RECTANGLE.shader
+                "rounded_rect_outline" -> ROUNDED_RECT_OUTLINE.shader
                 else -> {
                     null
                 }
diff --git a/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.fsh b/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.fsh
new file mode 100644
index 000000000..278390056
--- /dev/null
+++ b/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.fsh
@@ -0,0 +1,40 @@
+#version 120
+
+// Rect specific uniforms
+uniform float scaleFactor;
+uniform float radius;
+uniform vec2 halfSize;
+uniform vec2 centerPos;
+
+// Outline specific uniforms
+uniform float borderThickness;
+uniform float borderBlur;
+
+varying vec4 color;
+
+// From https://www.shadertoy.com/view/WtdSDs
+float roundedRectSDF(vec2 center, vec2 halfSize, float radius) {
+    return length(max(abs(center) - halfSize + radius, 0.0)) - radius;
+}
+
+void main() {
+    float xScale = gl_ModelViewMatrix[0][0];
+    float yScale = gl_ModelViewMatrix[1][1];
+    float xTranslation = gl_ModelViewMatrix[3][0];
+    float yTranslation = gl_ModelViewMatrix[3][1];
+
+    vec2 newHalfSize = vec2(halfSize.x * xScale, halfSize.y * yScale);
+
+    float newCenterPosY = centerPos.y;
+    if (yScale > 1.0) {
+        newCenterPosY = centerPos.y - (halfSize.y * (yScale - 1));
+    }
+
+    vec2 newCenterPos = vec2((centerPos.x * xScale) + (xTranslation * scaleFactor), newCenterPosY - (yTranslation * scaleFactor));
+
+    float distance = roundedRectSDF(gl_FragCoord.xy - newCenterPos, newHalfSize, max(radius, borderThickness));
+
+    // In testing, keeping the upper bound at 1.0 and letting the lower be changable seemed the most sensible for nice results
+    float smoothed = 1.0 - smoothstep(borderBlur, 1.0, abs(distance / borderThickness));
+    gl_FragColor = color * vec4(1.0, 1.0, 1.0, smoothed);
+}
diff --git a/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.vsh b/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.vsh
new file mode 100644
index 000000000..acfb52662
--- /dev/null
+++ b/src/main/resources/assets/skyhanni/shaders/rounded_rect_outline.vsh
@@ -0,0 +1,8 @@
+#version 120
+
+varying vec4 color;
+
+void main() {
+    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
+    color = gl_Color;
+}