diff --git a/themes/btw.bitslayn.inlineStatus/Backup/a/a.scss b/themes/btw.bitslayn.inlineStatus/Backup/a/a.scss new file mode 100644 index 0000000..6e6c0a0 --- /dev/null +++ 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 new file mode 100644 index 0000000..daefb9f --- /dev/null +++ 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 new file mode 100644 index 0000000..009d701 --- /dev/null +++ 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 new file mode 100644 index 0000000..63c4996 --- /dev/null +++ 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 new file mode 100644 index 0000000..d3a6bf1 --- /dev/null +++ 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; +} diff --git a/themes/btw.bitslayn.inlineStatus/Backup/lang.scss b/themes/btw.bitslayn.inlineStatus/Backup/lang.scss new file mode 100644 index 0000000..85728a2 --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/Backup/lang.scss @@ -0,0 +1,205 @@ +@use "sass:map"; + +// eyebrows.scss +$about-me: ( + "da": "Om mig", + "de": "Über mich", + "en-US": "About Me", + "en-GB": "About Me", + "es-ES": "Sobre mí", + "es-419": "Sobre mí", + "fr": "À propos de moi", + "hr": "O meni", + "it": "Chi sono", + "lt": "Apie mane", + "hu": "Bemutatkozás", + "nl": "Over mij", + "no": "Om meg", + "pl": "O mnie", + "pt-BR": "Sobre mim", + "ro": "Despre mine", + "fi": "Tietoja minusta", + "sv-SE": "Om mig", + "vi": "Giới thiệu về tôi", + "tr": "Hakkımda", + "cs": "Členem od", + "el": "Σχετικά με εμένα", + "bg": "За мен", + "ru": "Обо мне", + "uk": "Про мене", + "hi": "मेरे बारे में", + "th": "เกี่ยวกับฉัน", + "zh-CN": "自我介绍", + "ja": "自己紹介", + "zh-TW": "關於我", + "ko": "내 소개", +); +$roles: ( + "da": "Roller", + "de": "Rollen", + "en-US": "Roles", + "en-GB": "Roles", + "es-ES": "Roles", + "es-419": "Roles", + "fr": "Rôles", + "hr": "Uloge", + "it": "Ruoli", + "lt": "Vaidmenys", + "hu": "Rang", + "nl": "Rollen", + "no": "Roller", + "pl": "Role", + "pt-BR": "Cargos", + "ro": "Roluri", + "fi": "Roolit", + "sv-SE": "Roller", + "vi": "Vai trò", + "tr": "Roller", + "cs": "Rolí", + "el": "Ρόλοι", + "bg": "Роли", + "ru": "Роли", + "uk": "Ролі", + "hi": "रोल", + "th": "ตำแหน่ง", + "zh-CN": "身份组", + "ja": "ロール", + "zh-TW": "身分組", + "ko": "역할", +); +$mutuals: ( + "da": "Fælles", + "de": "Freunde", + "en-US": "Mutuals", + "en-GB": "Mutuals", + "es-ES": "En común", + "es-419": "Amigos en común", + "fr": "En commun", + "hr": "Zajednički", + "it": "In comune", + "lt": "Bendri", + "hu": "Közösek", + "nl": "Gemeenschappelijk", + "no": "Felles", + "pl": "Wspólne", + "pt-BR": "En Comun", + "ro": "În comun", + "fi": "Yhteiset", + "sv-SE": "Gemensamma", + "vi": "Bạn và máy chủ chung", + "tr": "Ortak arkadaşlar ve sunucular", + "cs": "Společné", + "el": "Κοινοί", + "bg": "Общи неща", + "ru": "Общие", + "uk": "Загальні", + "hi": "म्युचुअल्स", + "th": "เพื่อนและเซิร์ฟเวอร์ที่มีร่วมกัน", + "zh-CN": "共同好友/服务器", + "ja": "共通のフレンド", + "zh-TW": "共同好友或伺服器", + "ko": "공통", +); +$try-my-commands: ( + "da": "Prøv mine kommandoer", + "de": "Über mich", + "en-US": "Try my commands", + "en-GB": "Try my commands", + "es-ES": "Probar mis comandos", + "es-419": "Probar mis comandos", + "fr": "Essaie mes commandes", + "hr": "Isprobaj moje naredbe", + "it": "Prova i miei comandi", + "lt": "Išbandyk mano komandas", + "hu": "Próbáld ki a parancsaimat", + "nl": "Probeer mijn opdrachten", + "no": "Prøv kommandoene mine", + "pl": "Wypróbuj moje komendy", + "pt-BR": "Experimente meus comandos", + "ro": "Încearcă comenzile mele", + "fi": "Kokeile komentojani", + "sv-SE": "Testa mina kommandon", + "vi": "Thử các lệnh của tôi", + "tr": "Komutlarımı dene", + "cs": "Zkus moje příkazy", + "el": "Δοκίμασε τις εντολές μου", + "bg": "Изпробване на моите команди", + "ru": "Опробуйте мои команды", + "uk": "Спробуйте мої команди", + "hi": "मेरी कमांड ट्राय करें", + "th": "ลองใช้คำสั่งของฉันดูสิ", + "zh-CN": "试试我的指令", + "ja": "コマンドを試してみてね!", + "zh-TW": "試試看我的指令", + "ko": "제 명령어를 사용해보세요", +); + +// buttons.scss +// $edit-profile: ( +// "da": "Rediger profil", +// "de": "Profil bearbeiten", +// "en-US": "Edit Profile", +// "en-GB": "Edit Profile", +// "es-ES": "Editar perfil", +// "es-419": "Editar perfil", +// "fr": "Modifier le profil", +// "hr": "Uredi profil", +// "it": "Modifica profilo", +// "lt": "Redaguoti profilį", +// "hu": "Profil szerkesztése", +// "nl": "Profiel bewerken", +// "no": "Rediger profil", +// "pl": "Edytuj profil", +// "pt-BR": "Editar perfil", +// "ro": "Editează profilul", +// "fi": "Muokkaa profiilia", +// "sv-SE": "Redigera profilen", +// "vi": "Sửa Hồ Sơ", +// "tr": "Profili Düzenle", +// "cs": "Upravit profil", +// "el": "Επεξεργασία προφίλ", +// "bg": "Редактиране на профил", +// "ru": "Редактировать профиль", +// "uk": "Редагувати профіль", +// "hi": "प्रोफ़ाइल एडिट करें", +// "th": "แก้ไขโปรไฟล์", +// "zh-CN": "编辑个人资料", +// "ja": "プロフィールを編集", +// "zh-TW": "編輯個人資料", +// "ko": "프로필 편집", +// ); + +// popout.scss +$view-profile: ( + "da": "Se profil", + "de": "Profil ansehen", + "en-US": "View Profile", + "en-GB": "View Profile", + "es-ES": "Ver perfil", + "es-419": "Ver perfil", + "fr": "Voir le profil", + "hr": "Prikaži profil", + "it": "Mostra profilo", + "lt": "Peržiūrėti Profilį", + "hu": "Profil megtekintése", + "nl": "Profiel bekijken", + "no": "Vis profil", + "pl": "Zobacz profil", + "pt-BR": "Ver perfil", + "ro": "Vezi profil", + "fi": "Näytä profiili", + "sv-SE": "Visa profil", + "vi": "Xem Hồ Sơ", + "tr": "Profili Görüntüle", + "cs": "Zobrazit profil", + "el": "Προβολή προφίλ", + "bg": "Преглед на профил", + "ru": "Профиль", + "uk": "Профіль", + "hi": "प्रोफ़ाइल देखें", + "th": "ดูโปรไฟล์", + "zh-CN": "查看个人资料", + "ja": "プロフィール表示", + "zh-TW": "檢視個人檔案", + "ko": "프로필 보기", +); diff --git a/themes/btw.bitslayn.inlineStatus/Backup/mixins.scss b/themes/btw.bitslayn.inlineStatus/Backup/mixins.scss new file mode 100644 index 0000000..477c907 --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/Backup/mixins.scss @@ -0,0 +1,47 @@ +@mixin tooltip($label, $offset) { + // Content + &::before { + content: $label; + position: fixed; + font-size: 14px; + transform: translateY(calc($offset - 21px)); + background-color: var(--background-floating); + box-shadow: var(--shadow-high); + color: var(--text-normal); + padding: 8px 12px; + border-radius: 5px; + pointer-events: none; + box-sizing: border-box; + width: max-content; + max-width: 190px; + word-wrap: break-word; + } + // Pointer + &::after { + content: ""; + position: fixed; + border-top: 5px solid var(--background-floating); + border-right: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid transparent; + transform: translateY($offset); + pointer-events: none; + } +} + +@mixin dumbmaxing { + min-width: unset !important; + max-width: unset !important; + min-height: unset !important; + max-height: unset !important; +} + +@mixin dumbwidth { + min-width: unset !important; + max-width: unset !important; +} + +@mixin dumbheight { + min-height: unset !important; + max-height: unset !important; +} diff --git a/themes/btw.bitslayn.inlineStatus/Backup/sort.scss b/themes/btw.bitslayn.inlineStatus/Backup/sort.scss new file mode 100644 index 0000000..ab913bd --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/Backup/sort.scss @@ -0,0 +1,42 @@ +// Sort order +[class*="biteSizeOuter"] [class^="body"] { + // Username container + > [class^="container"] { + order: -8; + } + // Guild tag + > [class^="clickable"] { + order: -7; + } + // Status + // Bot buttons + > [class^="buttons"] { + order: -6; + } + // About me + > div:not([class], [style]) { + order: -5; + } + // Mutuals + > [class^="mutuals"] { + order: -4; + } + // Activities + > [class^="activityBiteSizePopout"], + > div:has([class^="activityBiteSizePopout"]) { + order: -3; + } + // Try my commands & roles + > div[style="position: relative;"], + section { + order: -2; + } + // My profile buttons + > [class^="menus"] { + order: -1; + } + // SimplifiedProfileNotes (plugin) + > section:has([class^="note"]) { + order: 1; + } +} diff --git a/themes/btw.bitslayn.inlineStatus/README.md b/themes/btw.bitslayn.inlineStatus/README.md new file mode 100644 index 0000000..5b8a22a --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/README.md @@ -0,0 +1,7 @@ +# Inline Custom Status +[![Install in Replugged](https://img.shields.io/badge/-Install%20in%20Replugged-blue?style=for-the-badge&logo=none)](https://replugged.dev/install?identifier=btw.bitslayn.inlineStatus) +[Vencord (Online Theme)](https://raw.githubusercontent.com/Bitslayn/RepluggedAddons/main/themes/btw.bitslayn.inlineStatus/raw/main.css) + +Removes status bubbles and places the status inside the profile. + +![Theme Image](https://raw.githubusercontent.com/Bitslayn/RepluggedAddons/main/themes/btw.bitslayn.inlineStatus/images/thumb.png) diff --git a/themes/btw.bitslayn.inlineStatus/images/thumb.png b/themes/btw.bitslayn.inlineStatus/images/thumb.png new file mode 100644 index 0000000..dee3f9e Binary files /dev/null and b/themes/btw.bitslayn.inlineStatus/images/thumb.png differ diff --git a/themes/btw.bitslayn.inlineStatus/manifest.json b/themes/btw.bitslayn.inlineStatus/manifest.json new file mode 100644 index 0000000..fbeb1c2 --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/manifest.json @@ -0,0 +1,20 @@ +{ + "id": "btw.bitslayn.inlineStatus", + "name": "Inline Custom Status", + "description": "Removes status bubbles and places the status inside the profile.", + "author": { + "name": "Bitslayn", + "discordID": "372268045927972864", + "github": "Bitslayn" + }, + "version": "1.0.0", + "updater": { + "type": "store", + "id": "btw.bitslayn.inlineStatus" + }, + "license": "MIT", + "type": "replugged-theme", + "main": "src/index.scss", + "source": "https://github.com/Bitslayn/RepluggedAddons/tree/main/themes/btw.bitslayn.inlineStatus", + "image": "https://raw.githubusercontent.com/Bitslayn/RepluggedAddons/main/plugins/btw.bitslayn.inlineStatus/images/thumb.png" +} diff --git a/themes/btw.bitslayn.inlineStatus/notes.txt b/themes/btw.bitslayn.inlineStatus/notes.txt new file mode 100644 index 0000000..cf353d6 --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/notes.txt @@ -0,0 +1,34 @@ +All +userProfileOuter + +Panels +userPanelOuter + +Bite size +biteSizeOuter + +Full size +fullSizeOuter + +Main static +themeContainer + +Nitro +is userProfileOuterThemed +not userProfileOuterUnthemed + +Heights + + +19.25px Emoji and text 1 line + + + +18px Just text + + + +37.25 Emoji and text 2 lines + +statusBubbleShape_e6ac4a statusBubbleEmojiOnlyPadding_e6ac4a +32 Just emoji \ No newline at end of file diff --git a/themes/btw.bitslayn.inlineStatus/raw/main.css b/themes/btw.bitslayn.inlineStatus/raw/main.css new file mode 100644 index 0000000..533cb2b --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/raw/main.css @@ -0,0 +1,147 @@ +/* themes/btw.bitslayn.inlineStatus/src/index.scss */ +[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; +} +[class^=statusBubbleOuter]::before, +[class^=statusBubbleOuter]::after { + display: none; +} +[class^=statusBubbleOuter] [class^=content] { + text-align: unset; + max-height: unset !important; + -webkit-line-clamp: unset; +} +[class^=statusBubbleOuter] .emoji { + cursor: default; +} +[class^=statusBubble] { + min-width: unset; + padding: unset; + border-radius: unset; + background: unset; +} +[class*=biteSizeOuter] > div { + max-height: calc(100vh - 28px - var(--custom-user-popout-outside-components-height) - 146px); + padding-top: 146px; +} +[class*=biteSizeOuter] header > svg { + transform: translateY(-146px); +} +[class*=biteSizeOuter]:not([class*=userProfileOuterThemed]) header > [class^=avatar] { + transform: translate(16px, -85px); +} +[class*=biteSizeOuter][class*=userProfileOuterThemed] header > [class^=avatar] { + transform: translate(12px, -89px); +} +[class^=userPanelOuter] > div > [class^=none] { + padding-top: 165px; +} +[class^=userPanelOuter] header > svg { + position: fixed !important; + transform: translateY(-165px); +} +[class^=userPanelOuter] header > [class^=avatar] { + position: fixed !important; + transform: translate(16px, -93px); +} +[class*=fullSizeOuter] > div { + padding-top: 273px; + padding-bottom: 16px; +} +[class*=fullSizeOuter] header > svg { + transform: translateY(-273px); +} +[class*=fullSizeOuter] header > [class^=headerInner] > [class^=avatar] { + transform: translate(24px, -128px); +} +[class*=userProfileOuter] header { + min-height: unset !important; +} +[class*=userProfileOuter] header > svg { + position: absolute; + width: unset; + padding-right: 4px; +} +[class*=userProfileOuter] header > [class^=avatar], +[class*=userProfileOuter] header > [class^=headerInner] > [class^=avatar] { + position: absolute; + top: unset; + left: unset; +} +[class*=userProfileOuter] header > [class^=headerInner] { + position: absolute; + padding: unset; +} +[class*=userProfileOuter] header > [class^=headerInner] > [class^=buttons] { + position: absolute; + padding-right: 4px; + margin-right: 16px; + top: 0; + right: 0; + transform: translateY(229px); +} +[class*=userProfileOuter]: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*=userProfileOuter]:not([class*=userProfileOuterThemed], [class^=userPanelOuter]) header > [class^=headerInner] > [class^=buttons] { + padding-right: unset; +} +[class*=userProfileOuter][class*=themeContainer] > div { + gap: 16px; +} +[class*=userProfileOuter][class*=themeContainer] > div > [class^=body] > [class^=menus] { + padding-bottom: 16px; +} +[class*=userProfileOuter] > div, +[class*=userProfileOuter] > div > [class^=none] { + gap: 12px; + display: flex; + flex-direction: column; + max-height: -webkit-fill-available; +} +[class*=userProfileOuter] > div > header, +[class*=userProfileOuter] > div > header > [class^=headerInner], +[class*=userProfileOuter] > div > [class^=none] > header, +[class*=userProfileOuter] > div > [class^=none] > header > [class^=headerInner] { + display: contents; +} +[class*=userProfileOuter] > div > header > div:not([class]), +[class*=userProfileOuter] > div > header > [class^=headerInner] > div:not([class]), +[class*=userProfileOuter] > div > [class^=none] > header > div:not([class]), +[class*=userProfileOuter] > div > [class^=none] > header > [class^=headerInner] > div:not([class]) { + order: -1; +} +[class*=userProfileOuter] > div > [class^=body], +[class*=userProfileOuter] > div > [class^=none] > [class^=body] { + display: contents; +} +[class*=userProfileOuter] > div > [class^=body] > [class^=container], +[class*=userProfileOuter] > div > [class^=none] > [class^=body] > [class^=container] { + order: -2; + max-height: max-content; +} +[class*=userProfileOuter] > div > [class^=body] > *, +[class*=userProfileOuter] > div > [class^=none] > [class^=body] > * { + margin: 0 16px; +} +[class*=userProfileOuter] > div > [class^=overlayBackground], +[class*=userProfileOuter] > div > [class^=none] > [class^=overlayBackground] { + margin-top: unset; +} +[class^=userPanelOuter] > div > [class^=none] { + min-width: 340px; +} +/*# sourceMappingURL=main.css.map */ diff --git a/themes/btw.bitslayn.inlineStatus/src/index.scss b/themes/btw.bitslayn.inlineStatus/src/index.scss new file mode 100644 index 0000000..4c23c6a --- /dev/null +++ b/themes/btw.bitslayn.inlineStatus/src/index.scss @@ -0,0 +1,185 @@ +// I've gotten to that point where this is getting really hard to sort through. Hopefully nothing needs to be changed lol + +// #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 + +// #region Prep header +$bitesize-padding: 146px; +$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; + } + } + > [class^="overlayBackground"] { + margin-top: unset; + } + } +} +[class^="userPanelOuter"] > div > [class^="none"] { + min-width: 340px; +} +// #endregion diff --git a/themes/btw.bitslayn.revertProfiles/raw/main.css b/themes/btw.bitslayn.revertProfiles/raw/main.css index cfa565e..cbc8655 100644 --- a/themes/btw.bitslayn.revertProfiles/raw/main.css +++ b/themes/btw.bitslayn.revertProfiles/raw/main.css @@ -90,27 +90,31 @@ [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body]::-webkit-scrollbar-track { margin-bottom: 4px; } +[class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=container] { + order: -8; +} [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=clickable] { - order: -1; + order: -7; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=buttons] { - order: 1; + order: -6; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > div:not([class], [style]) { - order: 2; + order: -5; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=mutuals] { - order: 3; + order: -4; } -[class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=activityBiteSizePopout] { - order: 4; +[class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=activityBiteSizePopout], +[class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > div:has([class^=activityBiteSizePopout]) { + order: -3; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > div[style="position: relative;"], [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] section { - order: 5; + order: -2; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > [class^=menus] { - order: 6; + order: -1; } [class^=biteSizeOuter] > [class^=userPopoutInner] > [class^=body] > span[class^=clickable] { transform: translateY(-38px); diff --git a/themes/btw.bitslayn.revertProfiles/src/profiles/popout.scss b/themes/btw.bitslayn.revertProfiles/src/profiles/popout.scss index 4283c25..ff7e585 100644 --- a/themes/btw.bitslayn.revertProfiles/src/profiles/popout.scss +++ b/themes/btw.bitslayn.revertProfiles/src/profiles/popout.scss @@ -35,34 +35,39 @@ // Sort order > [class^="body"] { + // Username container + > [class^="container"] { + order: -8; + } // Guild tag > [class^="clickable"] { - order: -1; + order: -7; } // Bot buttons > [class^="buttons"] { - order: 1; + order: -6; } // About me > div:not([class], [style]) { - order: 2; + order: -5; } // Mutuals > [class^="mutuals"] { - order: 3; + order: -4; } // Activities - > [class^="activityBiteSizePopout"] { - order: 4; + > [class^="activityBiteSizePopout"], + > div:has([class^="activityBiteSizePopout"]) { + order: -3; } // Try my commands & roles > div[style="position: relative;"], section { - order: 5; + order: -2; } // My profile buttons > [class^="menus"] { - order: 6; + order: -1; } }