Update smartcord.css

smartcord/smartcord.css

@@ -1 +1,510 @@
+/*Theme used: MidnightCord made by TranquillyUnpleasant */
+/*https://github.com/TranquillyUnpleasant/midnightcord */
+/* imports */
+@import url("https://nfld99.github.io/Better-Discord/Source_Code/Addons/Use_Fonts/DiscordFont.css");
 
+/* variables and shit */
+:root {
+  /* self explanatory (hopefully) */
+  --background-accent: #14171f; !important;
+
+  /* colour of links (including in embeds) */
+  --text-link: #d9a2eb;
+
+  /* colour of right hand side of screen and chat */
+  --background-primary: #181c25 !important;
+
+  /* embed backround/text channel list/member list colour */
+  --background-secondary: #14171f !important;
+
+  /* colour of change status/mute mic/deafen/user settings patch */
+  --background-secondary-alt: #0c0e13 !important;
+
+  /* colour of panel when you click on server name/edit message */
+  --background-floating: #0c0e13 !important;
+
+  /* colour of border around [top of] discord */
+  --background-tertiary: #0c0e13 !important;
+
+  /* colour of text box that you type in */
+  --channeltextarea-background: var(--background-accent) !important;
+
+  /* colours of things when you hover over them; e.g. a channel/user */
+  --background-modifier-hover: rgba(255, 255, 255, 0.01) !important;
+  --background-modifier-active: rgba(255, 255, 255, 0.03) !important;
+  --background-modifier-selected: rgba(255, 255, 255, 0.04) !important;
+
+  /* colour of channel name's text */
+  --channels-default: #9f9f9f !important;
+
+  /* colour of message when hovering over it */
+  --message-hover: #15181e !important;
+
+  /* colour of search bar */
+  --search-menu-colour: #0c0e13 !important;
+
+  /* colour of spoilered text */
+  --spoiler-colour: #00000d;
+
+  /* colour for the following things:
+     - channel icon, text with "Today at ..." by message
+     - "Message #channel/user" */
+  --text-muted: #b6b6b6 !important;
+
+  /* colour of text in messages and discord logo in top
+  left hand corner */
+  --text-normal: #fbfbfb !important;
+
+  /* colour of interactive buttons when looked at, e.g.:
+     - pinned messages
+     - mute mic/deafen/user settings
+     - mentions inbox
+     - text names of settings */
+  --interactive-normal: #c8c8c8 !important;
+
+  /* colour of text/button in interactive buttons (and text channel
+  names) when hovered over */
+  --interactive-hover: #9d3ebd !important;
+
+  /* colour of things that are currently selected (e.g. colour of
+  channel name that you are participating in) */
+  --interactive-active: #e8a1ff !important;
+
+  /* colour of muted channel names */
+  --interactive-muted: #614869 !important;
+
+  /* colour of:
+     - text in a codeblock
+     - text in a channel topic when you look but don't click on it
+     - the bit that says ROLES and NOTE when looking at profile
+       via member list
+     - the colour of someone's username (if they don't have a nickname)
+       when accessed via member list */
+  --header-secondary: #c9c9c9 !important;
+
+
+  /* i dont know what any of the following does but i suppose
+  its important yo */
+  --toast-background: var(--background-primary) !important;
+  --toast-header: var(--background-tertiary) !important;
+  --toast-contents: var(--background-secondary) !important;
+  --toast-border: var(--background-tertiary) !important;
+  --toast-box-shadow: rgba(0, 0, 0, .2) !important;
+  --offline-color: #3c3c3c !important;
+}
+
+
+/* Add role box (thanku Luckfire!!!) */
+  /* Add Role header */
+  .container-VSDcQc > .header-2bNvm4 {
+    background-color: var(--background-secondary) !important;
+  }
+  .container-VSDcQc > .autocompleteShadow-iiGWFU {
+    background-color: var(--background-primary) !important;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2),
+                0 0 0 1px var(--background-secondary);
+  }
+  .container-VSDcQc > .autocompleteArrowWrapper-3Z7OuM >
+  .autocompleteArrow-Zxoy9H {
+    background-color: var(--background-primary) !important;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2),
+                0 0 0 1px var(--background-secondary);
+  }
+
+
+/* Hiding the @ symbol in DMs (thanks to turkey snapper#0001!) */
+  /* apparently this only works if discord is in english
+  this actually hides the button itself */
+  [aria-label='Direct Message'] {
+    display: none;
+  }
+  /* pads it 12px from the left so the name doesnt look squished */
+  .cursorPonter-YEp76E { 
+    padding-left: 12px
+  }
+
+
+/* Colour of boxes of ANY POPUP e.g. delete/pin message
+(thank you so much LuckFire#4800!!!) */
+.root-1gCeng {
+  background-color: var(--background-primary) !important;
+}
+
+
+/* Blurred notes on a user (when clicked in member list
+and on profile) */
+  .note-QfFU8y textarea {
+    filter: blur(5px);
+    transition: .2s cubic-bezier(.2, .11, 0, 1);
+  }
+  .note-QfFU8y textarea:focus, .note-QfFU8y textarea:hover {
+    filter: none;
+    transition: .2s cubic-bezier(.2, .11, 0, 1);
+  }
+  .note-3HfJZ5 textarea {
+    filter: blur(5px);
+    transition: .2s cubic-bezier(.2, .11, 0, 1);
+  }
+  .note-3HfJZ5 textarea:focus, .note-3HfJZ5 textarea:hover {
+    filter: none;
+    transition: .2s cubic-bezier(.2, .11, 0, 1);
+  }
+
+
+/* Bot tags */
+  /* colour of the tag (backround and text) */
+  [class*="botTagCozy-"], [class*="botTag-"] {
+    background-color: #8000a0;
+    color: white;
+  }
+
+  /* not too sure what this does but without it, the colour
+  is just a box inside the tag rather than the whole tag being
+  the same colour */
+  .botTagRegular-2HEhHi span, .botTagInvert-18-95s span {
+    display: none;
+  }
+
+  /* ah yes, the boat tag */
+  .botTagRegular-2HEhHi::after, .botTagInvert-18-95s::after {
+    content: 'beep boop';
+  }
+
+
+/* Message delete */
+.theme-dark .message-2qRu38 {
+  background-color: var(--background-primary) !important;
+}
+
+
+/* Discord icon colour in top left hand corner */
+.homeIcon-tEMBK1 {
+  color: var(--text-link);
+}
+
+
+/* Discord watermark text in top left hand corner */
+  .wordmark-2iDDfm svg {
+    width: 0px;
+  }
+  .wordmark-2iDDfm:after {
+    font-family: "Discord";
+    content: "This is definitely not illegal what are you talking about...";
+    font-size: 2px;
+    background: rgb(255, 255, 255, 0.3);
+    background-size: 400% 400%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: absolute;
+    top: 6px;
+  }
+
+
+/* Tiffany blue Discord join/explore buttons */
+  .circleIconButton-jET_ig svg path{
+    fill: var(--text-link);
+  }
+  .circleIconButton-jET_ig.selected-ugP_am{
+    background-color: var(--text-link);
+  }
+  .circleIconButton-jET_ig.selected-ugP_am svg path{
+    fill: white;
+  }
+
+
+/* Feedback emojis after a call */
+  .emojiHappy-1hbF93 {
+    background-image: url("/assets/da3651e59d6006dfa5fa07ec3102d1f3.svg");
+  }
+  .emojiNeutral-14asfM {
+    background-image: url("/assets/fa9b378aed10bba1aea54ca34e76fe4b.svg");
+  }
+  .emojiSad-1GqgAQ {
+    background-image: url("/assets/9dc0c15c9e35f7ba86150ae12e895d29.svg");
+  }
+
+
+/* Friend list, block list, etc */
+.peopleColumn-29fq28 {
+  background-color: var(--background-accent);
+}
+
+
+/* Hide GIF and present boxes when typing a message */
+.button-3AYNKb {
+  display: none;
+}
+
+
+/* Hide the help button on the upper right */
+.iconWrapper-2OrFZ1[aria-label=Help] {
+  display: none;
+}
+
+
+/* Make the embed border "wrap around" the embed a bit more */
+.embed-IeVjo6 {
+  border-radius: 3px;
+}
+
+
+/* Mention suggestions when typing @something */
+  .autocompleteInner-zh20B_ {
+    background-color: var(--background-tertiary) !important;
+  }
+  .selectorSelected-1_M1WV {
+    background-color: var(--background-floating) !important;
+  }
+
+
+/* Message delete TEXT BOX colour */
+.theme-dark .message-2qRu38 {
+  background-color: var(--channeltextarea-background) !important;
+}
+
+
+/* Message hovering */
+div.message-2qnXI6:hover {
+  background-color: var(--message-hover) !important;
+}
+
+
+/* Make pinned messages wider */
+.messagesPopoutWrap-1MQ1bW{
+  width: 550px;
+}
+
+
+/* Profile when clicked in member list */
+  /* footer colour */
+  .flex-1xMQg5.flex-1O1GKY.vertical-V37hAW.flex-1O1GKY.directionColumn-35P_nr.justifyCenter-3D2jYp.alignCenter-1dQNNs.noWrap-3jynv6.headerTop-3C2Zn0{
+    background-color: var(--background-tertiary) !important;
+  }
+
+  /* no idea what this does tbh */
+  .scroller-2FKFPG.systemPad-3UxEGl.bodyInner-245q0L {
+    background-color: #300050 !important;  /* edited from var(--background-secondary) */
+  }
+
+  /* role box backround colour */
+  .body-3iLsc4 {
+    background-color: var(--background-secondary-alt) !important;
+  }
+
+  /* footer colour (where "Message @user" and "Right click user for more" are embedded) */
+  .footer-1fjuF6 {
+    background-color: var(--background-secondary-alt) !important;
+  }
+
+  /* colour of "Message @user" box */
+  .quickMessage-2XpSaN.quickMessage-1yeL4E {
+    background-color: var(--background-tertiary) !important;
+  }
+
+  /* colour of the "Playing" box */
+  .activityUserPopout-2yItg2.activity-11LB_k {
+    background-color: var(--background-tertiary) !important;
+  }
+
+  /* no idea what this does lol */
+  .button-1Pkqso.button-38aScr.lookOutlined-3sRXeN.colorWhite-rEQuAQ.buttonSize-2Pmk-w.fullWidth-1orjjo.grow-q77ONN {
+    background-color: var(--background-secondary) !important;
+  }
+
+
+/* Better Playing Modals, again from Luckfire#4800 :') */
+  .headerPlaying-j0WQBV, 
+  .topSectionPlaying-1J5E4n {
+    background-color: var(--background-accent);
+  }
+  .headerSpotify-zpWxgT, 
+  .topSectionSpotify-1lI0-P {
+    background-color: var(--background-accent);
+  }
+  .headerStreaming-2FjmGz, 
+  .topSectionStreaming-1Tpf5X {
+    background-color: var(--background-accent);
+  }
+
+
+/* Reaction box colour */
+  /* main box */
+  .reactors-Blmlhw.thin-1ybCId.scrollerBase-289Jih.fade-2kXiP2 {
+    background-color: var(--background-primary) !important;
+  }
+
+  /* colour of scroller on side listing emoji reaction counts */
+  .scroller-1-nKid.thin-1ybCId.scrollerBase-289Jih.fade-2kXiP2 {
+    background-color: var(--background-primary) !important;
+  }
+
+
+/* Search bar colour */
+.searchBar-3dMhjb {
+  background-color: var(--search-menu-colour) !important;
+}
+
+
+/* Sets backround colour for when you click on Server Boost */
+.perksModalContentWrapper-2HU6uL {
+  background: var(--background-accent) !important;
+}
+
+
+/* Spoilers */
+  /* spoiler colour */
+  .spoilerWarning-2aAZq1,
+  .spoilerText-3p6IlD.hidden-HHr2R9 {
+    background-color: var(--spoiler-colour) !important;
+  }
+
+  /* reveal spoiler on hover (click as well ofc) */
+  .spoilerText-3p6IlD.hidden-HHr2R9:hover .inlineContent-3ZjPuv {
+    opacity: 1;
+    border-radius: 3px;
+  }
+
+
+/* Inline status selection */
+  .status-1fhblQ, .description-2L932D {
+    display: none;
+  }
+  .separator-2I32lJ {
+    display: none;
+  }
+  .mask-1qbNWk.icon-1IxfJ2 {
+    --status-icon-size: 75%;
+    height: var(--status-icon-size); 
+    width: var(--status-icon-size);
+    margin-left: 33%;
+  }
+  .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8 >
+  .menu-3sdvDG.styleFixed-sX-yHV > .scroller-3BxosC.thin-1ybCId.scrollerBase-289Jih {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto auto auto auto;
+    visibility: visible;
+  }
+  .item-1tOPte.colorDefault-2K3EoJ:nth-of-type(7) {
+    grid-column: 1/5;
+  }
+  .animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8 {
+    transition: opacity 0.15s linear 0s;
+  }
+  .customText-tY5LJn {
+    font-size: 15px;
+  }
+
+
+/* Message search menu and quickswitcher; code yoinked from the
+amazing LuckFire#4800! */
+  .searchFilter-2ESiM3,
+  .searchAnswer-3Dz2-q {
+    background-color: var(--background-secondary-alt) !important;
+  }
+  #search-results {
+    background-color: var(--background-secondary) !important;
+    box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+  }
+  #search-results > .focused-2bY0OD {
+    background-color: var(--background-secondary) !important;
+  }
+  .option-96V44q.selected-rZcOL- {
+    background-color: var(--background-modifier-hover) !important;
+  }
+  .option-96V44q::after {
+    background: transparent !important
+  }
+  .option-96V44q.selected-rZcOL-::before {
+    background: var(--background-secondary-alt) !important;
+    padding-left: 10px
+  }
+  .react-datepicker,
+  .react-datepicker__header {
+    background-color: var(--background-secondary) !important;
+  }
+  .react-datepicker__day:not(:hover):not(
+    .react-datepicker__day--disabled):not(.react-datepicker__day--outside-month) {
+    background-color: var(--background-secondary-alt) !important;
+  }
+  .react-datepicker__day {
+    border-color: var(--background-tertiary) !important;
+  }
+  .react-datepicker__day--disabled,
+  .react-datepicker__day--outside-month {
+    background-color: var(--background-primary) !important;
+  }
+
+
+/* Sticker blocking */
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style] {
+    height: auto !important;
+    width: auto !important;
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:active {
+    height: 160px !important;
+    width: 160px !important;
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:after {
+    content: '1 blocked sticker - show sticker';
+    color: var(--text-link);
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:active:after {
+    content: none;
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:hover:after {
+    text-decoration: underline;
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style] .lottieCanvas-1W7L-f,
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style] .pngImage-33yLRP {
+    display: none;
+  }
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:active .lottieCanvas-1W7L-f,
+  .wrapper-2a6GCs .assetWrapper-3GNt0z[style]:active .pngImage-33yLRP {
+    display:block;
+  }
+
+
+/* Tweak Create Text Channel colours */
+  /* changes colour of main box */
+  .modal-2VIBV8.root-1gCeng.small-3iVZYw.fullscreenOnMobile-1bD22y {
+    background-color: var(--background-primary);
+  }
+
+  /* changes colour of footer */
+  .modal-2VIBV8.root-1gCeng > .footer-2gL1pp {  /* turkey snapper you're a genius thank you */
+    background-color: var(--background-secondary-alt);
+  }
+
+
+/* Upload popup */
+  /* colour of upload box */
+  .uploadModal-2ifh8j {
+    background-color: var(--background-primary) !important;
+  }
+
+  /* colour of the footer of the box where upload and spoiler button */
+  .footer-3mqk7D {
+    background-color: var(--background-secondary-alt) !important;
+  }
+
+
+/* VC backround image */
+  .minimum-28Z35l > .root-217Brm,
+  .video--KPXCT > .root-217Brm {
+    background:
+      url("https://cdn.discordapp.com/attachments/704992456634007563/772188587000070174/highscore.png")
+      center/100% no-repeat;
+  }
+  .minimum-28Z35l > .root-217Brm::before,
+  .video--KPXCT > .root-217Brm::before {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgb(0, 0, 0, 0.65);
+  }
+  .videoControls-24w7Xp > .topControls-KKImPZ > div > .headerWrapper-3NUKsd > .title-3qD0b-,
+  .videoControls-24w7Xp > .topControls-KKImPZ > div > .headerWrapper-3NUKsd > .transparent-2ZlE3R  {
+    box-shadow: none !important;
+  }