Merge pull request #9 from Bitslayn/Revert-Profiles-Rewrite

Inline Status Theme
Bitslayn · Aug 4, 2024 · 1b12f99 · 1b12f99
2 parents 0d3285d + aefa728
commit 1b12f99
Show file tree

Hide file tree

Showing 14 changed files with 1,033 additions and 0 deletions.
diff --git a/themes/btw.bitslayn.inlineStatus/Backup/a/a.scss b/themes/btw.bitslayn.inlineStatus/Backup/a/a.scss
@@ -0,0 +1,154 @@
+// Body
+[class*="biteSizeOuter"] {
+  > div {
+    gap: unset;
+    padding-bottom: 16px;
+    background: linear-gradient(
+      var(--profile-gradient-start),
+      var(--profile-gradient-start) var(--custom-user-banner-height-bite-size),
+      var(--profile-gradient-end)
+    );
+    overflow: hidden auto;
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: var(--profile-body-background-color);
+      width: -webkit-fill-available;
+      height: -webkit-fill-available;
+      border-radius: var(--radius-sm);
+      margin: 0 16px 16px 16px;
+    }
+    > header [class^="visibleContainer"],
+    > [class^="body"],
+    > footer {
+      padding-left: 12px;
+      padding-right: 12px;
+      margin-left: 16px;
+      margin-right: 16px;
+      z-index: 1;
+    }
+    > [class^="body"] {
+      overflow: unset;
+      min-height: unset;
+      padding-top: 12px;
+    }
+  }
+}
+[class*="biteSizeOuter"][class*="userProfileOuterThemed"] > div::after {
+  margin: 0 20px 20px 16px;
+}
+
+[class*="biteSizeOuter"] {
+  width: 348px;
+  box-sizing: border-box;
+}
+
+[class*="biteSizeOuter"] {
+  > div {
+    padding-top: $fancy-padding;
+    max-height: calc(
+      100vh - 28px - var(--custom-user-popout-outside-components-height) - $fancy-padding
+    );
+  }
+  header {
+    min-height: unset !important;
+    > svg {
+      position: fixed;
+      width: 340px;
+      transform: translateY($negative-fancy-padding);
+    }
+    > [class^="avatar"] {
+      position: fixed;
+      top: unset;
+      left: unset;
+    }
+    &:not(:has([style*="background-image"])) {
+      > svg {
+        width: 348px;
+        > foreignObject {
+          transform: translateY(calc(-105px + 60px));
+        }
+      }
+      > [class^="avatar"] > div {
+        transform: translateY(-45px);
+      }
+    }
+  }
+  // Unthemed
+  &:not([class*="userProfileOuterThemed"]) header {
+    > svg {
+      border-top-left-radius: var(--radius-sm);
+      border-top-right-radius: var(--radius-sm);
+    }
+    > [class^="avatar"] {
+      transform: translate(16px, calc(61px + $negative-fancy-padding));
+    }
+    &:has([style*="background-image"]) {
+      > svg {
+        width: 348px;
+      }
+    }
+  }
+  // Themed/Nitro
+  &[class*="userProfileOuterThemed"] header {
+    > [class^="avatar"] {
+      transform: translate(12px, calc(57px + $negative-fancy-padding));
+    }
+    &:not(:has([style*="background-image"])) {
+      > svg {
+        width: 340px;
+      }
+    }
+  }
+}
+
+// Banner avatar cutout
+[class*="biteSizeOuter"] {
+  // w/o Nitro
+  &[class*="userProfileOuterUnthemed"] circle {
+    // IMAGE
+    &[cx="52"][cy="97"][r="46"] {
+      cx: 48.3;
+      cy: 93.3;
+      r: 40.59;
+    }
+    // SOLID COLOR CORRECTGh nm
+    &[cx="56"][cy="101"][r="46"] {
+      cx: 48.3;
+      cy: 93.3;
+      r: 39.656;
+    }
+  }
+  // Nitro
+  &[class*="userProfileOuterThemed"] circle {
+    // IMAGE
+    &[cx="52"][cy="97"][r="46"] {
+      cx: 45.9;
+      cy: 85.7;
+      r: 40.59;
+    }
+    // SOLOLDFHBNIASUJHBF
+    &[cx="56"][cy="101"][r="46"] {
+      cx: 45.9;
+      cy: 85.7;
+      r: 39.656;
+    }
+  }
+}
+
+// Activities
+[class*="userProfileOuter"] [class^="activityBiteSizePopout"] {
+  padding: unset;
+  border-radius: unset;
+  background: unset !important;
+}
+
+// About me
+[class*="userProfileOuter"] {
+  [class^="descriptionClamp"] {
+    display: unset;
+  }
+  [class^="viewFullBio"] {
+    display: none;
+  }
+}
diff --git a/themes/btw.bitslayn.inlineStatus/Backup/a/buttons.scss b/themes/btw.bitslayn.inlineStatus/Backup/a/buttons.scss
@@ -0,0 +1,34 @@
+@use "mixins" as *;
+@use "lang";
+@use "sass:map";
+
+@mixin header-button {
+  width: 28px;
+  height: 28px;
+  padding: unset !important;
+  background: hsl(var(--black-500-hsl) / 0.3) !important;
+  transition: background-color 0.2s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    width: 18px !important;
+    height: 18px !important;
+    gap: unset;
+  }
+  &:hover {
+    background: hsl(var(--black-500-hsl) / 0.6) !important;
+    opacity: unset;
+  }
+}
+
+[class*="userProfileOuter"] > div > [class^="wrapper"] {
+  &,
+  .platform-indicators {
+    gap: 7px; // Seems arbitrary right? WRONG I mathematically determined this is the correct spacing relative to the original 8px
+  }
+  button,
+  span {
+    @include header-button;
+  }
+}
diff --git a/themes/btw.bitslayn.inlineStatus/Backup/avatar.scss b/themes/btw.bitslayn.inlineStatus/Backup/avatar.scss
@@ -0,0 +1,50 @@
+// Avatar hover
+> [class^="header"] > [class^="avatar"]:not(:has(> [class^="overlayIcon"])) {
+  @each $lang, $string in lang.$view-profile {
+    &:lang(#{$lang}):hover::after {
+      content: $string;
+    }
+  }
+  &:hover::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 10px;
+    line-height: 12px;
+    font-weight: 700;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    color: var(--white-500);
+    box-shadow: inset 0 0 120px hsl(var(--black-500-hsl) / 0.75);
+    opacity: 1;
+    mask-image: url(#svg-mask-avatar-default);
+  }
+  &:has(> div > svg > foreignObject:is([mask="url(#svg-mask-avatar-status-round-80)"]))::after {
+    mask-image: url(#svg-mask-avatar-status-round-80);
+  }
+  &:has(> div > svg > foreignObject:is([mask="url(#svg-mask-avatar-status-mobile-80)"]))::after {
+    mask-image: url(#svg-mask-avatar-status-mobile-80);
+  }
+  &::after {
+    transition: opacity 0.1s ease;
+    background-color: unset;
+    opacity: 0;
+    transform: scale(1.0084);
+    pointer-events: none;
+  }
+  [class*="overlay"]::after {
+    display: none;
+  }
+}
+> [class^="header"] > [class^="avatar"] [class*="overlay"]::after {
+  transition: opacity 0.1s ease;
+  background-color: unset;
+  border-radius: unset;
+  box-shadow: inset 0 0 120px hsl(var(--black-500-hsl) / 0.75);
+}
diff --git a/themes/btw.bitslayn.inlineStatus/Backup/header.scss b/themes/btw.bitslayn.inlineStatus/Backup/header.scss
@@ -0,0 +1,46 @@
+$fancy-padding: 146px;
+$negative-fancy-padding: calc($fancy-padding * -1);
+
+// Username container
+[class*="biteSizeOuter"] [class^="body"] > [class^="container"] {
+  // position: fixed;
+  // top: 0;
+}
+
+[class*="biteSizeOuter"] {
+  > div {
+    padding-top: $fancy-padding;
+    max-height: calc(
+      100vh - 28px - var(--custom-user-popout-outside-components-height) - $fancy-padding
+    );
+  }
+  header {
+    min-height: unset !important;
+    > svg {
+      position: fixed;
+      width: 300px;
+      transform: translateY($negative-fancy-padding);
+    }
+    > [class^="avatar"] {
+      position: fixed;
+      top: unset;
+      left: unset;
+    }
+  }
+  // Unthemed
+  &:not([class*="userProfileOuterThemed"]) header {
+    > svg {
+      border-top-left-radius: var(--radius-sm);
+      border-top-right-radius: var(--radius-sm);
+    }
+    > [class^="avatar"] {
+      transform: translate(16px, calc(61px + $negative-fancy-padding));
+    }
+  }
+  // Themed/Nitro
+  &[class*="userProfileOuterThemed"] header {
+    > [class^="avatar"] {
+      transform: translate(12px, calc(57px + $negative-fancy-padding));
+    }
+  }
+}
diff --git a/themes/btw.bitslayn.inlineStatus/Backup/index.scss b/themes/btw.bitslayn.inlineStatus/Backup/index.scss
@@ -0,0 +1,62 @@
+@use "mixins" as *;
+@use "lang";
+@use "sass:map";
+
+@use "header";
+
+[class*="biteSizeOuter"] {
+  > div {
+    gap: unset;
+    overflow: hidden auto;
+    > [class^="body"] {
+      overflow: unset;
+      min-height: unset;
+      padding-top: 12px;
+    }
+  }
+}
+
+// Status
+[class*="biteSizeOuter"] > div > header [class^="visibleContainer"] {
+  margin-left: 16px;
+  margin-right: 16px;
+  z-index: 1;
+  // transform: translateY(100%);
+}
+
+[class^="visibleContainer"] {
+  position: relative;
+  top: unset !important;
+  left: unset !important;
+}
+[class^="invisibleContainer"] {
+  display: none;
+}
+[class^="statusBubbleOuter"] {
+  border: unset !important;
+  box-shadow: unset;
+  max-width: fit-content;
+  &::before,
+  &::after {
+    display: none;
+  }
+  [class^="content"] {
+    text-align: unset;
+    max-height: unset !important;
+    -webkit-line-clamp: unset;
+  }
+  .emoji {
+    cursor: default;
+  }
+}
+[class^="statusBubble"] {
+  min-width: unset;
+  padding: unset;
+  border-radius: unset;
+  background: unset;
+}
+
+// Footer
+[class*="biteSizeOuter"] footer {
+  padding-top: 8px;
+}