Revert profiles wip

Bitslayn · Jul 8, 2024 · a214c30 · a214c30
1 parent 37c5975
commit a214c30
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 0 deletions.
diff --git a/themes/btw.bitslayn.revertProfiles/README.md b/themes/btw.bitslayn.revertProfiles/README.md
@@ -0,0 +1,5 @@
+# Revert Profiles
+
+Reverts user profiles to how they used to look before Discord simplified them. This does not increase the amount of roles displayed in profiles.
+
+![Theme Image](https://raw.githubusercontent.com/Bitslayn/RepluggedAddons/main/plugins/btw.bitslayn.revertProfiles/images/thumb.png)
diff --git a/themes/btw.bitslayn.revertProfiles/manifest.json b/themes/btw.bitslayn.revertProfiles/manifest.json
@@ -0,0 +1,20 @@
+{
+  "id": "btw.bitslayn.revertProfiles",
+  "name": "Revert Profiles",
+  "description": "Reverts user profiles to how they used to look before Discord simplified them. This does not increase the amount of roles displayed in profiles.",
+  "author": {
+    "name": "Bitslayn",
+    "discordID": "372268045927972864",
+    "github": "Bitslayn"
+  },
+  "version": "1.0.0",
+  "updater": {
+    "type": "store",
+    "id": "btw.bitslayn.revertProfiles"
+  },
+  "license": "MIT",
+  "type": "replugged-theme",
+  "main": "src/main.scss",
+  "source": "https://github.com/Bitslayn/RepluggedAddons/tree/main/themes/btw.bitslayn.revertProfiles",
+  "image": "https://raw.githubusercontent.com/Bitslayn/RepluggedAddons/main/plugins/btw.bitslayn.revertProfiles/images/thumb.png"
+}
diff --git a/themes/btw.bitslayn.revertProfiles/src/main.scss b/themes/btw.bitslayn.revertProfiles/src/main.scss
@@ -0,0 +1,65 @@
+// Section headers
+@mixin eyebrow-font {
+  display: flex;
+  font-weight: 700;
+  color: var(--header-primary) !important;
+  font-family: var(--font-display);
+  font-size: 12px;
+  line-height: 1.3333;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+@mixin eyebrow($content, $margin-bottom) {
+  content: $content;
+  margin-bottom: $margin-bottom;
+  width: 100%;
+  @include eyebrow-font;
+}
+
+div {
+  [class^="activityBiteSizePopout"] > [class^="headerContainer"] > h1, /* Both these top two are for activity headers which use semibold instead of eyebrow */
+  [class^="activitySimplifiedProfile"] > [class^="headerContainer"] > h1,
+  [class^="userProfileModalInner"] [class^="section"] > h1 /* For headers in the full profile which use semibold instead of eyebrow */ {
+    @include eyebrow-font;
+  }
+
+  &:has(> [class^="descriptionClamp"])::before,
+  [class^="userProfileModalInner"] [class^="scroller"] > [class^="markup"]::before {
+    @include eyebrow("About Me", 6px);
+  }
+
+  &:has(> [data-list-id^="roles-"]):not(:has([data-text-variant="eyebrow"]))::before {
+    @include eyebrow("Roles", 6px);
+  }
+
+  [class^="mutuals_"]::before {
+    @include eyebrow("Mutuals", 4px); // .mutuals_dc9488 has a row-gap of 2px [2 + 4 = 6]
+  }
+}
+
+// Unclamp About Me
+[class^="descriptionClamp"] {
+  -webkit-line-clamp: 6;
+  overflow: hidden scroll;
+  max-height: unset;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    background-color: var(--profile-body-divider-color);
+  }
+}
+[class^="viewFullBio"] {
+  display: none;
+}
+
+// Break apart
+[class^="activityBiteSizePopout"] {
+  padding: unset;
+  background: transparent !important;
+}
diff --git a/themes/btw.bitslayn.revertProfiles/src/reference.css b/themes/btw.bitslayn.revertProfiles/src/reference.css
@@ -0,0 +1,219 @@
+/* Popout layout */
+[class^="biteSizeOuter"] {
+  min-width: 340px;
+}
+[class^="userPopoutInner"] {
+  gap: 0;
+  border-radius: 4.5px;
+}
+[class^="userPopoutInner"] > [class^="body"] {
+  gap: 12px;
+  margin: 38px 16px 0;
+  padding: 0 12px 8px;
+  background-color: var(--profile-body-background-color);
+  border-top-left-radius: var(--radius-sm);
+  border-top-right-radius: var(--radius-sm);
+}
+[class^="userPopoutInner"] > [class^="body"]:has([class^="menus"]) {
+  border-radius: var(--radius-sm);
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+}
+[class^="userPopoutInner"] > [class^="body"] > [class^="container"]::after {
+  content: "";
+  display: block;
+  margin: 12px 0 0;
+  height: 1px;
+  background-color: var(--profile-body-divider-color);
+}
+[class^="userPopoutInner"] > [class^="body"] > [class^="container"] {
+  padding-top: 12px;
+}
+[class^="animator"]
+  [class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"] {
+  position: fixed;
+  right: 18px;
+  top: calc(
+    25px + var(--custom-user-banner-height-bite-size) +
+      var(--custom-user-profile-themed-container-user-profile-themed-padding)
+  );
+  border: unset;
+  padding: 4px;
+  background-color: var(--profile-body-background-color);
+}
+[class^="accountProfilePopoutWrapper"] [class^="userPopoutInner"] > [class^="body"] {
+  overflow: unset !important;
+  padding-right: 12px !important;
+}
+[class^="accountProfilePopoutWrapper"]
+  [class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"] {
+  position: absolute;
+  right: -2px;
+  top: calc(
+    -157px + var(--custom-user-banner-height-bite-size) + var(--custom-user-profile-themed-container-user-profile-themed-padding)
+  );
+  border: unset;
+  padding: 4px;
+  background-color: var(--profile-body-background-color);
+}
+[class^="customizationSection"]
+  [class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"] {
+  position: absolute;
+  right: 18px;
+  top: calc(
+    25px + var(--custom-user-banner-height-bite-size) +
+      var(--custom-user-profile-themed-container-user-profile-themed-padding)
+  );
+  border: unset;
+  padding: 4px;
+  background-color: var(--profile-body-background-color);
+}
+[class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"]
+  img,
+[class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"]
+  svg {
+  width: 22px;
+  height: 22px;
+}
+[class^="userPopoutInner"] > [class^="footer"] {
+  margin: 0 16px 12px;
+  padding: 0 12px 12px;
+  background-color: var(--profile-body-background-color);
+  border-bottom-left-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
+}
+[class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"]
+  .replugged-badge {
+  padding: unset;
+}
+[class^="userPopoutInner"]
+  > [class^="body"]
+  > [class^="container"]
+  > [class^="tags"]
+  > [class^="container"]
+  .replugged-badge
+  svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Popout avatar */
+[class^="userPopoutInner"] > [class^="header"] > [class^="avatar"] {
+  left: 22px;
+  margin-top: 15px;
+}
+[class^="userPopoutInner"] > [class^="header"] > [class^="bannerSVGWrapper"] circle {
+  cx: 51;
+  cy: 98.75;
+  r: 40.25;
+}
+
+/* Modal layout */
+[class^="userProfileModalInner"] [class^="tabBarItem"] {
+  height: unset;
+  padding-bottom: 16px;
+}
+
+/* Eyebrows */
+div:has(> [class^="descriptionClamp"])::before,
+[class^="userProfileModalInner"] [class^="scroller"] > [class^="markup"]::before,
+[class^="mutuals"]::before,
+div:has(> [data-list-id^="roles-"]):not(:has([data-text-variant="eyebrow"]))::before,
+[class^="activityBiteSizePopout"] > [class^="headerContainer"] > h1,
+[class^="activitySimplifiedProfile"] > [class^="headerContainer"] > h1,
+[class^="userProfileModalInner"] [class^="section"] > h1 {
+  display: flex;
+  font-weight: 700;
+  color: var(--header-primary);
+  font-family: var(--font-display);
+  font-size: 12px;
+  line-height: 1.3333;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+[class^="mutuals"]::before {
+  content: "Mutuals";
+  margin-bottom: 4px;
+  width: 100%;
+}
+div:has(> [class^="descriptionClamp"])::before,
+[class^="userProfileModalInner"] [class^="scroller"] > [class^="markup"]::before {
+  content: "About Me";
+  margin-bottom: 6px;
+}
+div:has(> [data-list-id^="roles-"]):not(:has([data-text-variant="eyebrow"]))::before {
+  content: "Roles";
+  margin-bottom: 6px;
+}
+
+/* Status */
+[class^="statusBubbleOuter"]::before,
+[class^="statusBubbleOuter"]::after,
+[class^="userPopoutInner"] [class^="invisibleContainer"] {
+  display: none;
+}
+[class^="statusBubble"] {
+  border: unset !important;
+  background: transparent;
+  box-shadow: none;
+  min-width: unset;
+  max-width: unset;
+  padding: 0px;
+}
+[class^="userPopoutInner"] [class^="visibleContainer"] {
+  top: calc(
+    10px + var(--custom-user-banner-height-bite-size) +
+      var(--custom-user-profile-themed-container-user-profile-themed-padding)
+  ) !important;
+  left: 32px !important;
+}
+
+/* Unclamp About Me */
+[class^="descriptionClamp"] {
+  -webkit-line-clamp: 6;
+  overflow: hidden scroll;
+  max-height: unset;
+}
+[class^="descriptionClamp"]::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+[class^="descriptionClamp"]::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  background-color: var(--profile-body-divider-color);
+}
+[class^="viewFullBio"] {
+  display: none;
+}
+
+/* Activities */
+[class^="activityBiteSizePopout"] {
+  padding: unset;
+  background: transparent !important;
+}