Tropix126 / BetterDiscordStuff

Personal repository for hosting code relating to BetterDiscord.
https://tropix126.github.io/BetterDiscordStuff/
MIT License
55 stars 144 forks source link

Profile/Chat UI Tweaks #99

Closed bonkmaykrQ closed 3 years ago

bonkmaykrQ commented 3 years ago

Create text shadows to improve readability in bright areas

Screenshot_20201028_205611

Make sure size of emoji/gift/GIF area is 50px to prevent it from leaking into the chat window.

Screenshot_20201028_205901

Tropix126 commented 3 years ago

for the sake of consistency i'm going to say no to the text shadow.

bonkmaykrQ commented 3 years ago

Snippet for anyone who wants text shadows on client-side:

#app-mount > div:nth-child(6) > div.modal-3c3bKg.da-modal > div > div > div.topSectionNormal-2-vo2m.da-topSectionNormal > div > div > div.size16-1P40sf.customStatusText-39gdCI.da-customStatusText,
#app-mount > div:nth-child(6) > div.modal-3c3bKg.da-modal > div > div > div.topSectionNormal-2-vo2m.da-topSectionNormal > header > div.headerInfo-30uryT.da-headerInfo
{
    text-shadow: 1px 1px 3px black, 1px 1px 3px black !important;
    overflow: visible visible !important;
}

.da-headerInfo .da-creationDate,
.da-headerInfo  .da-joinedAtDate,
.da-headerInfo  .da-lastMessageDate,
#app-mount > div:nth-child(6) > div.modal-3c3bKg.da-modal > div > div > div.topSectionNormal-2-vo2m.da-topSectionNormal > header > div.headerInfo-30uryT.da-headerInfo > div.nameTag-2IFDfL.da-nameTag.nameTag-m8r81H.da-nameTag > span.username-2b1r56.da-username.username-3gJmXY.da-username,
#app-mount > div:nth-child(6) > div.modal-3c3bKg.da-modal > div > div > div.topSectionNormal-2-vo2m.da-topSectionNormal > div > div > div.size16-1P40sf.customStatusText-39gdCI.da-customStatusText > div > span,
#app-mount > div:nth-child(6) > div.modal-3c3bKg.da-modal > div > div > div.topSectionNormal-2-vo2m.da-topSectionNormal > header > div.headerInfo-30uryT.da-headerInfo > div.nameTag-2IFDfL.da-nameTag.nameTag-m8r81H.da-nameTag > span.discriminator-xUhQkU.da-discriminator
{
    width: -webkit-fill-available;
    /* Fixes horizontal shadow cutoff */

    padding-bottom: 3px;
    margin-bottom: -3px;
    /* Fixes vertical shadow cutoff */
}