Facebook
From Addy, 3 Years ago, written in CSS.
Embed
Download Paste or View Raw
Hits: 55
  1. root{
  2.     --background: url(https://pbs.twimg.com/media/DiQxho5U0AAInki.jpg);
  3.  
  4.     --transparency-1: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  5. --transparency-2: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  6. --transparency-3: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  7. --transparency-4: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  8.     --transparency-5: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  9. }
  10.  
  11.  
  12. /Background Img/
  13. .appMount-3lHmkl {background-image: var(--background); background-position: center; background-size: cover; background-color: transparent!important;}
  14.  
  15. /Home/
  16. .tabBar-1E2ExX .primarySelected-3uHKZn {color: red!important;}
  17. .topPill-30KHOu .selected-3s45Ha {background-color: red!important; color: white!important;}
  18.  
  19. .root-1BQpZw , .container-3gCOGc {background-image: var(--transparency-1)!important; background-color: transparent!important;}
  20.  
  21. .friendsActionRemove-qu8nnl {background-color: red!important;}
  22. .friendsActionVoiceCall-3EdPsR {background-color: rgb(114,137,218)!important;}
  23. .friendsActionVideoCall-2_PKeP {background-color: rgb(29,185,84)!important;}
  24.  
  25. .stickyHeader-1pqx0j , .headerBar-UHpsPw {background-color: transparent!important;}
  26. .minimum-1pRSEN {background-color: rgba(0,0,0,0.2)!important;}
  27. .iconsWrapper-1RelE3 {background-color: rgba(25,25,25,0.5)!important; border-color: transparent!important;}
  28.  
  29. /Servers/
  30. .wrapper-2lTRaf {background-color: rgba(100,100,100,0.2)!important}
  31. .selected-nT-gM3 .wrapper-2lTRaf {background-color: rgba(100,100,100,0.3)!important}
  32. .circleIconButton-jET_ig {background-color: rgba(100,100,100,0.2)!important}
  33.  
  34. .container-2td-dC .badge-3dItlm {background-color: red!important}
  35.  
  36. /Channels/
  37. .cursorPointer-1ajlYk {background-color: rgba(100,0,0,0.5); height: 30px; text-align: center; border-radius: 10px 10px 0 0px; padding: 5px;}
  38. .iconTransition-2pOJ7l {padding: 5px;}
  39.  
  40. /Text/
  41. .content-20Aix8 {margin: 0; width: 200px; transition: width 0.2s; transition-timing-function: ease-in-out; background-color: rgba(50,50,50,0.15)}
  42. .content-20Aix8:hover {width: 100%; background-color: rgba(50,50,50,0.3)}
  43. .contentSelectedText-3wUhMi {margin: 0; width: 100%; background-color: rgba(50,50,50,0.6)!important;}
  44. .wrapper-2NJDcI {background-color: rgba(50,50,50,0.3)}
  45.  
  46. .iconSpacing-3JkGQO .wrapper-232cHJ {background-color: red}
  47.  
  48. /Voice/
  49. .listDefault-36Sktb {padding: 2px; margin-bottom: 2px;}
  50. .wrapperConnectedVoice-2mvQJY .content-20Aix8 {width: 100%; background-color: rgba(50,50,50,0.6)!important;}
  51. .contentLockedVoice-1gx-SP , .contentMutedText-2y6aPQ {background-color: rgba(100,0,0,0.2)!important;}
  52. .contentLockedVoice-1gx-SP:hover {background-color: rgba(50,50,50,0.3)!important}
  53.  
  54. /VC Info/
  55. .container-1UB9sr {background-color: rgba(0,0,0,0.55)!important; border: 0;}
  56. .buttonDisconnect-3W_SJc {background-color: rgba(100,0,0,0.9)!important;}
  57.  
  58. /VC User/
  59. .avatarSpeaking-1wJCNq {box-shadow:0 0 0 2px red; }
  60. .voiceUser-vT8g1p {transition: margin 0.2s; transition-timing-function: ease-in-out; margin-left: 0; padding-right: 5px}
  61. .voiceUser-vT8g1p:hover {background-color: rgba(50,50,50,0.3)!important; border-radius: 2px; margin-left: 20px;}
  62.  
  63. /Messages/
  64. .h1-1IDj26 {color: red!important;}
  65. .hasMore-3e72_v button {background-color: rgba(50,50,50,0.5)!important; color: red;}
  66. .wrapperHover-1GktnT , .mention {background-color: rgba(150,0,0,0.2)!important; color: red!important;}
  67. .isMentionedCozy-3isp7y {background-color: rgba(150,0,0,0.3)!important;}
  68. .isMentionedCozy-3isp7y:after {background: red; border-left: 4px solid red; width: 1px;}
  69. code , pre {background-color: rgba(50,50,50,0.3)!important}
  70.  
  71. .messageGroupBlocked-3wrQQX {background-color: rgba(50,50,50,0.5)!important;}
  72. .messageGroupBlockedBtn-1PBBh- {background-color: transparent!important; color: red!important;}
  73.  
  74. .noticeRegion-1YviSH {margin: auto;}
  75. .lookLink-9FtZy- , .anchor-3Z-8Bb , .bda-link {color: red!important;}
  76. .embedProviderLink-2Pq1Uw {color: rgb(150,150,150)!important;}
  77.  
  78. .unreadMentionsBar-1VrBNe {background-color: red;}
  79. .selected-ML3OIq:before {background-color: rgb(100,100,100)!important; border-radius: 0!important;}
  80. .unread-qLkInr:before {background-color: rgb(150,0,0)!important; border-radius: 0!important;}
  81.  
  82. .channelTextArea-1LDbYG .inner-zqa7da , .autocomplete-1vrmpx, .attachPopout-1n-ZKM {background-color: rgba(50,50,50,0.5)!important;}
  83.  
  84. .newMessagesBar-mujexs {background-color: red}
  85. .newMessagesBar-mujexs:hover {background-color: rgb(255,50,50)}
  86. .newMessagesBar-mujexs:active {background-color: rgb(255,100,100)}
  87.  
  88.  
  89. /ScrollBars/
  90. ::-webkit-scrollbar-thumb {background-color: rgba(150,0,0,0.6)!important; border-color: transparent!important;}
  91. .messagesWrapper-3lZDfY ::-webkit-scrollbar-track-piece , .friendsTable-133bsv ::-webkit-scrollbar-track-piece , .gameLibrary-TTDw4Y ::-webkit-scrollbar-track-piece {background-color: transparent!important; border-color: transparent!important;}
  92. .messagesWrapper-3lZDfY ::-webkit-scrollbar-track , .friendsTable-133bsv ::-webkit-scrollbar-track , .gameLibrary-TTDw4Y ::-webkit-scrollbar-track {background-color: rgba(150,0,0,0.4)!important; border-radius: 10px; border-color: rgba(150,0,0,0.4)!important}
  93.  
  94. .applicationStore-1pNvnv ::-webkit-scrollbar-track , .activityFeed-28jde9 ::-webkit-scrollbar-track {background-color: transparent!important;}
  95.  
  96. /Context Menu/
  97. .menu-Sp6bN1 , .contextMenu-HLZMGh {background-color: rgba(10,10,10,0.6)!important}
  98. .item-1GzJrl:hover , .item-1Yvehc:hover {background-color: rgba(30,30,30,0.7)!important}
  99. .separator-2zcjq8 {background-color: rgb(100,0,0)}
  100. .danger-2dXSTE:hover {background-color: rgba(100,0,0,0.6)!important}
  101. input[type=checkbox]:checked+span,.checkbox-1ix_J3{border-color:red!important;background-color:red!important}
  102.  
  103. /Server Menu/
  104. .leave-1DRJfn:hover {background-color: rgba(100,0,0,0.5)!important;}
  105. .invite-271nFU:hover {background-color: rgba(114,137,218,0.5)!important;}
  106.  
  107. /Server Members/
  108. .membersGroup-v9BXpm {background-color: rgba(0,0,0,0.5); margin: 20px 8px 0 16px; padding: 0; height: 20px; text-align: center; border-radius: 10px; color: red!important;}
  109. .content-OzHfo4 , .channel-2QD9_O a {margin-left: 0px; border-radius: 50px 0 0 50px!important; transition: margin 0.2s; transition-timing-function: ease-in-out;}
  110. .content-OzHfo4:hover , .channel-2QD9_O a:hover {background-color: rgba(50,50,50,0.6)!important; margin-left: 15px}
  111. .popout-open .content-OzHfo4 {background-color: rgba(100,100,100,0.6)!important; margin-left: 15px}
  112.  
  113. /Inputs/
  114. .lookFilled-1Gx00P, .valueChecked-m-4IJZ, .bd-pfbtn, .checked, .bda-settings-button , .addButton-pcyyf6 , .tabBar-1E2ExX .primary-3j8BhM , .da-selected[style*="rgb(114, 137, 218)"] {background-color: red!important;}
  115. .barFill-23-gu- , .itemSelected-1qLhcL.da-role {background-color: red}
  116. .inputDefault-_djjkz:focus , .focused-1mmYsC {border-color: red!important}
  117. .questionMark-CWEQZn {background-color: red!important; margin-bottom: 4px}
  118.  
  119. .item-26Dhrx .checkboxWrapper-SkhIWG .checked-3_4uQ9 {background-color: white!important; border-color: transparent!important;}
  120.  
  121. .search-bar , .searchBar-2_Yu-C {background-color: rgba(50,50,50,0.6)!important;}
  122.  
  123. .item-26Dhrx[style*="rgb(114, 137, 218)"] {background-color: red!important; border-color: red!important;}
  124. .checked-3_4uQ9 {border-color: transparent!important;}
  125. polyline[stroke='#7289da']{stroke:red}
  126. .item-26Dhrx[style*="rgb(114, 137, 218)"] label .checkbox-1ix_J3 {background-color: white!important; border-color: transparent!important;}
  127. .checkbox-1ix_J3 {background-color: transparent!important; border: 2px solid; border-color: rgba(50,50,50,0.5)!important;}
  128.  
  129. .wrapper-3jrx9n {border-color: red!important;}
  130. .option-n0icdO:hover {background-color: rgba(150,0,0,0.8);}
  131. .selected-mKYnfr {background-color: red!important;}
  132. .da-disabled {background-color: transparent!important;}
  133.  
  134. /Settings/
  135. .sidebar-CFHs9e .side-8zPYf6 .item-PXvHYJ, .ui-tab-bar-item {line-height:15px!important; background-color: rgba(150,150,150,0.07); width: 100%; transition: width 0.2s; transition-timing-function: ease-in-out;}
  136. .sidebar-CFHs9e .side-8zPYf6 .item-PXvHYJ:hover, .ui-tab-bar-item:hover {background-color: rgba(150,150,150,0.2); width:187px;}
  137. .sidebar-CFHs9e .side-8zPYf6 .itemSelected-1qLhcL, .ui-tab-bar-item.selected {line-height:15px!important; background-color: rgba(150,150,150,0.4)!important; width:187px;}
  138. .sidebar-CFHs9e .side-8zPYf6 .header-2RyJ0Y, .ui-tab-bar-header {background-color: rgba(150,0,0,0.5); border-radius: 3px; line-height:28px!important; padding:0 0 0 10px!important}
  139. .ui-tab-bar-item {margin-bottom: 2px!important}
  140.  
  141. .sidebar-CFHs9e {padding: 20px 18px 20px 23px ;width: 210px }
  142. .sidebarRegion-VFTUkN {flex: 0}
  143. .contentColumn-2hrIYH {max-width: 90%;padding: 60px 30px 80px}
  144.  
  145. .codeRedemptionRedirect-1wVR4b {background-color: rgba(150,150,150,0.1)!important;}
  146.  
  147. .game-1ipmAa:before , .emojiRow-zIc7ZX:before , .member-1q7VfX:before , .inviteSettingsInviteRow-3p2O-N:before , .guild-settings-banned-user:before , .bannedUser-1IalTM:before {background-color: rgba(50,50,50,0.5)!important}
  148. .searchBar-1MOL6S {background-color: rgba(50,50,50,0.5)!important}
  149.  
  150. .video-34IsHk {width: 660px; margin: auto; margin-bottom: 15px}
  151. .section-2YzZxo  {width: 660px; margin: auto}
  152. .sectionTier1-2w9cqh {width: 660px; margin: auto; margin-top: 15px}
  153.  
  154. .content-1rPSz4 {padding-top: 20px!important;}
  155.  
  156. a[target="_blank"] {color: red;}
  157.  
  158. .foreground-2aE44H {stroke: red;}
  159. .previewOverlay-2O7_KC , .formNotice-2_hHWR {background-color: rgba(50,50,50,0.5)!important}
  160. .media-engine-video {background: transparent!important;}
  161. .avatarUploaderInner-3UNxY3 {background-color:red!important;}
  162.  
  163. /CustomCSS/
  164. .ace_editor {background-color: rgba(0,0,0,0.2)!important}
  165. .ace_gutter , #bd-customcss-attach-controls {background-color: rgba(0,0,0,0.5)!important}
  166.  
  167. .ace_active-line {background-color: rgba(100,0,0,0.4) !important}
  168. .ace_gutter-active-line {background-color: rgba(100,0,0,0.7)!important}
  169.  
  170. #bd-customcss-attach-controls {padding-left: 9px}
  171. .checkbox-3kaeSU {padding-left: 1px}
  172. #bd-customcss-detach-controls-button button {border: 0!important; border-radius: 10px!important; margin-right: 5px!important; transition: 0.1s background-color ease-in-out}
  173. #bd-customcss-detach-controls-button button:hover {background-color: rgb(100,100,100)!important}
  174. #bd-customcss-detach-controls-button button:active {background-color: red!important}
  175.  
  176. #bd-customcss-detach-container {background-color: rgba(0,0,0,0.7)}
  177. #editor-detached button {background-color: red!important}
  178.  
  179. /ChangeLog And Other Popups/
  180. .modal-3HD5ck , .bd-modal-inner , .messagesPopoutWrap-1MQ1bW , .messageGroupWrapper-o-Zw7G , .container-3ayLPN , .searchResultsWrap-2DKFzt , .quickswitcher-3JagVE ,
  181. .react-datepicker , .popoutList-T9CKZQ , .bd-modal-body {background-color: rgba(25,25,25,0.5)!important; border-radius: 10px!important;}
  182. .footer-2yfCgX , .footer-3mqk7D  {background-color: rgba(0,0,0,0.5)!important; border-radius: 0 0 10px 10px;}
  183. .header-1R_AjF , .react-datepicker__header {background-color: transparent!important;}
  184.  
  185. .input-2VB9rf {background-color: rgba(50,50,50,0.5)!important}
  186.  
  187. .bodyTitle-Y0qMQz {background-color: rgba(0,0,0,0.5); padding: 3px; text-align: center; border-radius: 10px; color: white;}
  188.  
  189. .body-3iLsc4 , .footer-1fjuF6 {background-color: rgba(30,30,30,0.5)!important}
  190. .userPopout-3XzG_A {border-radius: 10px}
  191.  
  192. /User Popup/
  193. .headerNormal-T_seeN , .topSectionNormal-2-vo2m , .body-3ND3kc , .quickMessage-2XpSaN {background-color: rgba(30,30,30,0.5)!important}
  194. .headerPlaying-j0WQBV , .topSectionPlaying-1J5E4n {background-color: rgba(114,137,218,0.5);}
  195. .headerSpotify-zpWxgT , .topSectionSpotify-1lI0-P {background-color: rgba(29,185,84,0.5)}
  196. .headerStreaming-2FjmGz , .topSectionStreaming-1Tpf5X {background-color: rgba(89,54,149,0.5)}
  197.  
  198. .activityName-1IaRLn {color: white!important;}
  199.  
  200. /Upload Popup/
  201. .uploadModal-2ifh8j , .bgScale-1otPtc {background-color: rgba(50,50,50,0.5)!important}
  202. .inner-3nWsbo {border-color: transparent!important;}
  203. button.lookFilled-1Gx00P[type=submit] {color: white!important;}
  204. .uploadModal-2ifh8j .footer-3mqk7D .button {height: 39px; margin-right: 5px; background-color: rgba(100,100,100,0.5)}
  205. .inner-zqa7da {background-color: rgba(100,100,100,0.5)!important}
  206. .image-2yrs5j {border-color: red!important;}
  207.  
  208. .instructions-2Du9gG pre {background-color: transparent!important;}
  209. .uploadDropModal-2kTwbc.error-kKl9o2 {background-color: rgba(240, 71, 71,0.5)!important;}
  210.  
  211. /Search Popup/
  212. .searchHeader-1l-wpR , .header-ykumBX {background-color: rgba(50,50,50,0.5)!important; border-radius: 10px 10px 0 0!important;}
  213. .option-96V44q.selected-rZcOL- , .message-2qRu38 , .dockItem-2kQDqg:hover , .card-7JP0BX , .hit-NLlWXA {background-color: rgba(100,100,100,0.5)!important; border-radius: 10px;}
  214. .channelName-1QajIf {background-color: transparent!important;}
  215. .searchResult-3pzFAB {border: 2px solid rgb(40,40,40); border-radius: 10px; background-color: rgba(50,50,50,0.5)}
  216. .searchResult-3pzFAB:before {border-radius: 10px;}
  217. .option-96V44q:after {background-image: none!important;}
  218.  
  219. .react-datepicker__day:hover {background-color: red!important}
  220. .react-datepicker_day--disabled , .react-datepicker_day--outside-month {background-color: rgba(10,10,10,0.5)!important}
  221. .react-datepicker_day--disabled:hover , .react-datepicker_day--outside-month:hover {background-color: rgba(255,0,0,0.5)!important}
  222. .react-datepicker__day--selected::after {background-color: red!important}
  223. .hintValue-29ny8Z {background-color: red!important}
  224.  
  225. /Join & Create Server Popup/
  226. .animator-US5i9g .modal-3HD5ck {background-color: transparent!important}
  227. .animator-US5i9g {border-radius: 10px; background-color: rgba(25,25,25,0.5)!important}
  228. .action-1lSjCi {background-color: white!important;}
  229.  
  230. .animator-US5i9g input:focus {border-color: #43b581!important;}
  231. .sampleLink-KPFu3I {color: #43b581!important;}
  232.  
  233. input[placeholder="Enter a server name"]:focus {border-color: rgb(114, 137, 218)!important;}
  234. a[href="//discordapp.com/guidelines"] {color: rgb(114, 137, 218)!important;}
  235.  
  236. /Emoji Picker Popup/
  237. .emojiPicker-3m1S-j , #bda-qem , #bda-qem-twitch-container , #bda-qem-favourite-container {background-color: rgba(0,0,0,0.5)!important; border: 0;}
  238. .header-1nkwgG {background-color: rgba(0,0,0,0.5)!important;}
  239. .searchBarInner-1_Tg2R {background-color: rgba(50,50,50,0.5)!important}
  240. .header-1nkwgG .searchBar-2_Yu-C {background-color: transparent!important;}
  241. .header-1nkwgG .searchBarInner-1_Tg2R input {color: white!important;}
  242. ::-webkit-input-placeholder {color: rgba(255,255,255,0.5)!important;}
  243. .stickyHeader-1SS0JU {background-color: rgba(0,0,0,0.5)!important; border-radius: 0 0 10px 10px}
  244. .categories-1feg4n .selected-39BZ4S {border-color: red!important}
  245. .emojiPicker-3m1S-j ::-webkit-scrollbar-track {background-color: transparent!important;}
  246.  
  247. #bda-qem button {color: white; box-shadow: 0 0 0 0!important; border: 0!important;}
  248. #bda-qem button:hover {background-color: rgba(100,100,100,0.5)!important;}
  249. #bda-qem button.active {background-color: rgba(150,150,150,0.5)!important;}
  250.  
  251. /BBD ContentErrors and Other BBD Modals/
  252. .error-link {color: red;}
  253. .bd-modal-inner button {background-color: red!important}
  254.  
  255.  
  256.  
  257.  
  258.