Skip to content

Commit

Permalink
Inline status bitesize profile padding fix & other stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Bitslayn committed Aug 6, 2024
1 parent fff7f4b commit 17718a1
Show file tree
Hide file tree
Showing 25 changed files with 276 additions and 65 deletions.
42 changes: 0 additions & 42 deletions themes/btw.bitslayn.inlineStatus/Backup/sort.scss

This file was deleted.

14 changes: 9 additions & 5 deletions themes/btw.bitslayn.inlineStatus/raw/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion themes/btw.bitslayn.inlineStatus/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
// #endregion

// #region Prep header
$bitesize-padding: 146px;
$bitesize-padding: 158px;
$panel-padding: 165px;
$fullsize-padding: 273px;

Expand Down Expand Up @@ -174,6 +174,9 @@ $fullsize-padding: 273px;
margin: 0 16px;
}
}
> footer {
padding-top: 4px;
}
> [class^="overlayBackground"] {
margin-top: unset;
}
Expand Down
17 changes: 17 additions & 0 deletions themes/btw.bitslayn.revertProfiles/Backup/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Bulk of the profile modal styles.
@use "profiles/popout";
@use "profiles/full";
@use "profiles/panel";

@use "globals"; // Assigns profile padding for statuses and badges relative to the banner's height.
@use "eyebrows"; // Styles for eyebrows. Self explanatory.
@use "banners"; // Makes banners smaller with svg adjustments.
@use "roles"; // Also self explanatory.
@use "heights"; // Full profile heights.

@use "fixes/botfix"; // Fixes related to bot profiles, Discord's official profile, and deleted user profiles.
@use "fixes/static"; // Fixes for static profile modals such as the one in settings.

// IN NEED OF A DEEP CLEAN AAAAA

@use "components/banner/buttons";
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
@use "lang";
@use "sass:map";

@debug map.get(lang.$view-profile, en-US);

// Avatar hover
> [class^="header"] > [class^="avatar"]:not(:has(> [class^="overlayIcon"])) {
div:not([class^="customizationSection"])
> [class^="biteSizeOuter"]
[class^="header"]
> [class^="avatar"] {
@each $lang, $string in lang.$view-profile {
&:lang(#{$lang}):hover::after {
content: $string;
Expand All @@ -25,10 +33,10 @@
opacity: 1;
mask-image: url(#svg-mask-avatar-default);
}
&:has(> div > svg > foreignObject:is([mask="url(#svg-mask-avatar-status-round-80)"]))::after {
&:has([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 {
&:has([mask="url(#svg-mask-avatar-status-mobile-80)"])::after {
mask-image: url(#svg-mask-avatar-status-mobile-80);
}
&::after {
Expand All @@ -42,7 +50,7 @@
display: none;
}
}
> [class^="header"] > [class^="avatar"] [class*="overlay"]::after {
[class^="header"] > [class^="avatar"] [class*="overlay"]::after {
transition: opacity 0.1s ease;
background-color: unset;
border-radius: unset;
Expand Down
202 changes: 189 additions & 13 deletions themes/btw.bitslayn.revertProfiles/src/index.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,193 @@
// Bulk of the profile modal styles.
@use "profiles/popout";
@use "profiles/full";
@use "profiles/panel";
@use "sort";

@use "globals"; // Assigns profile padding for statuses and badges relative to the banner's height.
@use "eyebrows"; // Styles for eyebrows. Self explanatory.
@use "banners"; // Makes banners smaller with svg adjustments.
@use "roles"; // Also self explanatory.
@use "heights"; // Full profile heights.
@use "buttons";
@use "avatar";

@use "fixes/botfix"; // Fixes related to bot profiles, Discord's official profile, and deleted user profiles.
@use "fixes/static"; // Fixes for static profile modals such as the one in settings.
// I've gotten to that point where this is getting really hard to sort through. Hopefully nothing needs to be changed lol

// IN NEED OF A DEEP CLEAN AAAAA
// #region Debubble status
[class^="visibleContainer"] {
position: relative;
top: unset !important;
left: unset !important;
padding: 0 16px;
}
[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;
}
// #endregion

@use "components/banner/buttons";
// #region Prep header
$bitesize-padding: 158px;
$panel-padding: 165px;
$fullsize-padding: 273px;

[class*="biteSizeOuter"] {
> div {
max-height: calc(
100vh - 28px - var(--custom-user-popout-outside-components-height) - $bitesize-padding
);
padding-top: $bitesize-padding;
}
header {
> svg {
transform: translateY(calc($bitesize-padding * -1));
}
}
&:not([class*="userProfileOuterThemed"]) header {
> [class^="avatar"] {
transform: translate(16px, calc(61px + $bitesize-padding * -1));
}
}
&[class*="userProfileOuterThemed"] header {
> [class^="avatar"] {
transform: translate(12px, calc(57px + $bitesize-padding * -1));
}
}
}

[class^="userPanelOuter"] {
> div > [class^="none"] {
padding-top: $panel-padding;
}
header {
> svg {
position: fixed !important;
transform: translateY(calc($panel-padding * -1));
}
> [class^="avatar"] {
position: fixed !important;
transform: translate(16px, calc(72px + $panel-padding * -1));
}
}
}

[class*="fullSizeOuter"] {
> div {
padding-top: $fullsize-padding;
padding-bottom: 16px;
}
header {
> svg {
transform: translateY(calc($fullsize-padding * -1));
}
> [class^="headerInner"] > [class^="avatar"] {
transform: translate(24px, calc(145px + $fullsize-padding * -1));
}
}
}

[class*="userProfileOuter"] {
header {
min-height: unset !important;
> svg {
position: absolute;
width: unset;
padding-right: 4px;
}
> [class^="avatar"],
> [class^="headerInner"] > [class^="avatar"] {
position: absolute;
top: unset;
left: unset;
}
> [class^="headerInner"] {
position: absolute;
padding: unset;
> [class^="buttons"] {
position: absolute;
padding-right: 4px;
margin-right: 16px;
top: 0;
right: 0;
transform: translateY($fullsize-padding - 44px);
}
}
}
&:not([class*="userProfileOuterThemed"], [class^="userPanelOuter"]) header {
> svg {
border-top-left-radius: var(--radius-sm);
border-top-right-radius: var(--radius-sm);
padding-right: unset;
}
> [class^="headerInner"] {
> [class^="buttons"] {
padding-right: unset;
}
}
}
}
// #endregion

// #region Prep body
[class*="userProfileOuter"] {
&[class*="themeContainer"] {
> div {
gap: 16px;
> [class^="body"] {
> [class^="menus"] {
padding-bottom: 16px;
}
}
}
}
> div,
> div > [class^="none"] {
gap: 12px;
display: flex;
flex-direction: column;
max-height: -webkit-fill-available;
> header {
&,
> [class^="headerInner"] {
display: contents;
> div:not([class]) {
order: -1;
}
}
}
> [class^="body"] {
display: contents;
> [class^="container"] {
order: -2;
max-height: max-content;
}
> * {
margin: 0 16px;
}
}
> footer {
padding-top: 4px;
}
> [class^="overlayBackground"] {
margin-top: unset;
}
}
}
[class^="userPanelOuter"] > div > [class^="none"] {
min-width: 340px;
}
// #endregion
Loading

0 comments on commit 17718a1

Please sign in to comment.