smartfridge.ml/smartcord/smartcord.css
2021-04-13 16:24:47 +02:00

510 lines
14 KiB
CSS

/*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;
}