ProfileBannerHeight: create

themes/ProfileBannerHeight/README.md

@@ -0,0 +1,50 @@
+[preview-new1]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new1.avif
+[preview-new2]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new2.avif
+[preview-new3]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new3.avif
+[preview-old1]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old1.avif
+[preview-old2]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old2.avif
+[preview-old3]: https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old3.avif
+
+# Profile Banner Height
+![Status: working](https://img.shields.io/badge/status-working-green?style=flat-square)
+
+Customisable profile banner height.
+
+| Old profile                   | New profile experiment                    |
+| ----------------------------- | ----------------------------------------- |
+| ![Old themed][preview-old1]   | ![New themed][preview-new1]               |
+| ![Old themed][preview-old2]   | ![New unthemed with status][preview-new2] |
+| ![Old unthemed][preview-old3] | ![New unthemed][preview-new3]             |
+
+## Usage
+### `@import`
+```css
+@import url("https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/main.css");
+```
+### Replugged automatic theme
+[Install now](https://replugged.dev/install?identifier=net.saltssaumure.ProfileBannerHeight)
+### Replugged manual theme
+[Download now](https://github.com/MiniDiscordThemes/Snippets/releases/latest/download/net.saltssaumure.ProfileBannerHeight.asar)
+### Vencord online theme
+```
+https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/main.css
+```
+
+## Customisation
+Paste the following at the end of Custom / Quick CSS, then edit the values:
+```css
+.userProfileInner__8ff35 {
+    /* Plain colour banner */
+    &:where(:not(:has(.banner__6d414[style*="background-image"]))) {
+        --banner-height-desired: 60px;
+    }
+    /* Image banner */
+    &:where(:has(.banner__6d414[style*="background-image"])) {
+        --banner-height-desired: 70px;
+    }
+    /* All banner types in new profile experiment */
+    &.biteSizeInnerThemed__5cdaf {
+        --banner-height-desired: 65px;
+    }
+}
+```

themes/ProfileBannerHeight/manifest.json

@@ -0,0 +1,29 @@
+{
+  "id": "net.saltssaumure.ProfileBannerHeight",
+  "name": "Profile Banner Height",
+  "description": "Customisable profile banner height. See GitHub for customisation options.",
+  "author": [
+    {
+      "name": "Saltssaumure",
+      "discordID": "134142022092062720",
+      "github": "Saltssaumure"
+    }
+  ],
+  "version": "1.0.0",
+  "updater": {
+    "type": "store",
+    "id": "net.saltssaumure.ProfileBannerHeight"
+  },
+  "license": "MIT",
+  "type": "replugged-theme",
+  "main": "scss/main.scss",
+  "source": "https://github.com/MiniDiscordThemes/Snippets/blob/main/themes/ProfileBannerHeight",
+  "image": [
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new1.avif",
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new2.avif",
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-new3.avif",
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old1.avif",
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old2.avif",
+    "https://minidiscordthemes.github.io/Snippets/ProfileBannerHeight/preview-old3.avif"
+  ]
+}

themes/ProfileBannerHeight/scss/_core.scss

@@ -0,0 +1,10 @@
+// Hide overflowing banner
+.userPopoutInner_ac0960 {
+    overflow: hidden;
+    position: relative;
+
+    &::before {
+        width: 100%;
+        height: 100%;
+    }
+}

themes/ProfileBannerHeight/scss/_new.scss

@@ -0,0 +1,34 @@
+// New profile
+
+.biteSizeInnerThemed__5cdaf {
+    // Banner, icon, badges, status all wrapped in header
+    --banner-height-original: 105px;
+    --banner-height-desired: 65px;
+    --height-diff: calc(var(--banner-height-original) - var(--banner-height-desired));
+    --guff-height: 45px; // Height of everything but banner in header
+    --header-height-original: calc(var(--banner-height-original) + var(--guff-height));
+    --avatar-offset: 4px;
+
+    // Move header up
+    .header__725f2 {
+        position: absolute;
+        top: calc(-1 * var(--height-diff));
+
+        // Avatar
+        .userProfileOuterThemed_a425f3 & .clickable_bf76d2 {
+            top: calc(61px - var(--avatar-offset));
+            left: calc(22px - var(--avatar-offset));
+        }
+
+        // Status
+        .invisibleContainer__1e05d,
+        .visibleContainer_adf761.biteSize__4396a {
+            top: calc(var(--banner-height-original) - 10px);
+        }
+    }
+
+    // Margin fills space left by header
+    .body__489bc {
+        margin-top: calc(var(--header-height-original) - var(--height-diff));
+    }
+}

themes/ProfileBannerHeight/scss/_old.scss

@@ -0,0 +1,55 @@
+// Old profile
+
+.userProfileInner__8ff35 {
+    --height-diff: calc(var(--banner-height-original) - var(--banner-height-desired));
+
+    // No image banner
+    &:where(:not(:has(.banner__6d414[style*="background-image"]))) {
+        --banner-height-original: 60px;
+        --banner-height-desired: 60px;
+
+        // Avatar
+        .avatarWrapper__0cd44 {
+            top: calc(16px - var(--height-diff));
+        }
+    }
+
+    // Yes image banner
+    &:where(:has(.banner__6d414[style*="background-image"])) {
+        --banner-height-original: 120px;
+        --banner-height-desired: 70px;
+
+        // Avatar
+        .avatarWrapper__0cd44 {
+            top: calc(76px - var(--avatar-offset) - var(--height-diff));
+            left: calc(22px - var(--avatar-offset));
+        }
+    }
+
+    // No theme
+    .userProfileOuterUnthemed__9741c & {
+        --avatar-offset: 0px;
+    }
+
+    // Yes theme
+    .userProfileOuterThemed_a425f3 & {
+        --avatar-offset: 4px;
+    }
+
+    // Move banner up
+    .bannerSVGWrapper__8a38c:not(.header__725f2 .bannerSVGWrapper__8a38c) {
+        position: absolute;
+        top: calc(-1 * var(--height-diff));
+    }
+
+    // Badges
+    .profileBadges__1f2ab {
+        position: absolute;
+    }
+
+    // Margin fills space left by header
+    .userPopoutOverlayBackground__3e7e6 {
+        --profile-badges-height: 30px;
+        margin-top: calc(var(--banner-height-original) + var(--profile-badges-height) + 28px - var(--height-diff));
+    }
+}

themes/ProfileBannerHeight/scss/_validate.scss

@@ -0,0 +1,5 @@
+@property --banner-height-desired {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 60px;
+}

themes/ProfileBannerHeight/scss/main.scss

@@ -0,0 +1,4 @@
+@forward "./validate";
+@forward "./core";
+@forward "./old";
+@forward "./new";