diff --git a/addons/better-featured-project/addon.json b/addons/better-featured-project/addon.json index 8277035dc1..378696a15a 100644 --- a/addons/better-featured-project/addon.json +++ b/addons/better-featured-project/addon.json @@ -19,6 +19,16 @@ "matches": ["https://scratch.mit.edu/users/*/"] } ], + "settings": [ + { + "id": "blur", + "name": "Banner blur", + "type": "integer", + "min": 0, + "max": 5, + "default": 0 + } + ], "tags": ["community"], "l10n": true } diff --git a/addons/better-featured-project/userscript.js b/addons/better-featured-project/userscript.js index eaae48b127..628f4c785a 100644 --- a/addons/better-featured-project/userscript.js +++ b/addons/better-featured-project/userscript.js @@ -60,7 +60,7 @@ export default async function ({ addon, global, console, msg }) { } if (document.querySelector(".user-content .stage") !== null) { createBetterProfilePage( - document.querySelector(".user-content .stage img").src, + document.querySelector(".user-content .stage img").src.replace("282x210", "480x360"), document.querySelector(".user-content .stage a").href, document.querySelector(".featured-project-heading").innerText, document.querySelector(".user-content .player .title a").innerText diff --git a/addons/better-featured-project/userstyle.css b/addons/better-featured-project/userstyle.css index 57b56ea342..740224c0e6 100644 --- a/addons/better-featured-project/userstyle.css +++ b/addons/better-featured-project/userstyle.css @@ -1,17 +1,33 @@ -#profile-data .box-head { - padding-top: 250px !important; - padding-bottom: 20px !important; - background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)), var(--featured-thumb) !important; - background-size: cover !important; - background-position: center !important; +.box#profile-data .box-head { + padding-top: 250px; + padding-bottom: 20px; text-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; border: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border-top-left-radius: 10px !important; - border-top-right-radius: 10px !important; - padding-left: 20px !important; - padding-right: 20px !important; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + padding-left: 20px; + padding-right: 20px; +} +#profile-data .box-head::before { + /* The background is a pseudo-element so filters can be applied to it + without affecting the text. */ + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)), var(--featured-thumb); + background-size: cover; + background-position: center; + filter: blur(calc(1px * var(--betterFeaturedProject-blur))); +} +#profile-data .box-head .header-text { + position: relative; + z-index: 1; } #profile-data .box-head h2, #profile-data .box-head h3 { @@ -35,7 +51,7 @@ right: 20px !important; } #better-featured-project-name { - color: white !important; + color: white; position: absolute; top: 30px; left: 30px;