API tools faq
paste
XCanG

Discord styles improvements

XCanG
Apr 1st, 2017
326
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.41 KB | None | 0 0
raw download clone embed print report
  1. /**** Fixes for Discord styles ****/
  2. /* Function: Scale up emoji and reactions when hover. So no more eyes of a mole. Look at this pure HD emoji. (Standart emoji is SVG, what is vector graphic and can be in any resolution, custom emoji is a png image with maximum size 128x128 px) */
  3. .reaction {
  4.     transform: scale(1);
  5.     box-shadow: inset 0 0 0px 0px rgba(154, 136, 102, 0);
  6.     transition: transform .35s cubic-bezier(.18, .89, .32, 1.28), box-shadow .5s cubic-bezier(.18, .89, .32, 1.28);
  7. }
  8. .reaction:hover {
  9.     transform: scale(1.75);
  10.     z-index: 2 !important;
  11.     box-shadow: inset 0 0 2px 2px rgba(154, 136, 102, .5);
  12. }
  13. /*↓*/.emoji:not(.jumboable) {
  14.     width: 32px;
  15.     height: 32px;
  16.     margin-top: -8px !important;
  17.     vertical-align: middle;
  18.     box-sizing: border-box;
  19. }
  20. .emoji.jumboable {
  21.     width: 64px;
  22.     height: 64px;
  23. }/*↑*/
  24. .emoji, .emoji.jumboable {
  25.     transform: scale(1);
  26.     transition: transform .35s cubic-bezier(.18, .89, .32, 1.28);
  27. }
  28. .emoji:hover {
  29.     transform: scale(2); /*3*/
  30.     z-index: 2 !important;
  31.     position: relative;
  32. }
  33. .emoji.jumboable:hover {
  34.     transform: scale(1.5); /*2*/
  35.     z-index: 2 !important;
  36.     position: relative;
  37. }
  38. .reaction:hover > .emoji {
  39.     transform: scale(1.5); /*2*/
  40.     z-index: 3 !important;
  41.     position: relative;
  42. }
  43. .emoji {
  44.     margin: 0 0 0 0 !important;
  45. }
  46. /* Function: Make emoji picker larger in size. Fit testing on 1920x1200. Decrease scale if it not fit. */
  47. .emojiPicker-3g68GS {
  48.     transform: scale(2.0);
  49.     transform-origin: bottom right;
  50. }
  51. /* Function: Make avatars bigger and move it down a bit. */
  52. .message-group > .avatar-large {
  53.     transform: scale(1.5);
  54.     margin-top: 10px;
  55.     margin-bottom: 5px;
  56. }
  57. /* Function: Scale up small avatars in voice section when hover, like styles above. */
  58. .channels-3g2vYe .userHovered-3tfm93 .avatarDefault-3jtQoc, .channels-3g2vYe .userDefault-2_cnT0 .avatarDefault-3jtQoc {
  59.     transform: scale(1);
  60.     transition: transform .35s cubic-bezier(.18, .89, .32, 1.28);
  61. }
  62. .channels-3g2vYe .userHovered-3tfm93 .avatarDefault-3jtQoc {
  63.     transform: scale(3);
  64.     z-index: 100000 !important;
  65.     position: relative;
  66. }
  67. .channels-3g2vYe .userHovered-3tfm93 .nameHovered-28u_Fz, .channels-3g2vYe .userDefault-2_cnT0 .nameDefault-1I0lx8 {
  68.     transition: margin-left .35s cubic-bezier(.18, .89, .32, 1.28);
  69. }
  70. .channels-3g2vYe .userHovered-3tfm93 .nameHovered-28u_Fz {
  71.     margin-left: 24px !important;
  72.     text-overflow: clip !important;
  73. }
  74. /* Function: Apply shadow on message avatar when hover on that message. */
  75. .message-group:hover .avatar-large {
  76.     box-shadow: 0 0 15px rgba(255, 255, 255, .3);
  77. }
  78. .message-group {
  79.     padding: 10px 0 10px 20px; /*20px 0 20px 20px*/
  80.     margin-left: 0px;
  81. }
  82. /* Function: Function to show full channel name. name itself have sliding animation and by that you can read long names. */
  83. .guild-channels .channel .channel-name:hover {
  84.     animation: marq 3s linear 1s infinite alternate;
  85. }
  86. @keyframes marq {
  87.     0% {
  88.         text-indent: calc(0% + 15px);
  89.     }
  90.     100% {
  91.         text-indent: calc(0% - 176px);
  92.     }
  93. }
  94. /* Function: As function above, but apply to member status "Playing: Something..." ← so that you can see what after "..." */
  95. .channel-members .member:hover .member-activity strong {
  96.     animation: marq2b 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate;
  97.     display: inline-block;
  98.     height: 13px;
  99.     font-weight: 700;
  100.     vertical-align: bottom;
  101.     overflow: hidden;
  102. }
  103. @keyframes marq2 {
  104.     0% {
  105.         text-indent: calc(0% + 0px);
  106.     }
  107.     37.5% {
  108.         text-indent: calc(0% - 75px);
  109.     }
  110.     87.5% {
  111.         text-indent: calc(0% + 25px);
  112.     }
  113.     100% {
  114.         text-indent: calc(0% + 0px);
  115.     }
  116. }
  117. @keyframes marq2b {
  118.     0% {
  119.         text-indent: calc(0% + 25px);
  120.     }
  121.     100% {
  122.         text-indent: calc(0% - 100px);
  123.     }
  124. }
  125. /* Function: Fix links to youtube streams what does not have thumbnail (you can see that playing button in left-bottom position), so this is fix that by setup minimum values. */
  126. .embed .embed-thumbnail:not(.embed-thumbnail-video) {
  127.     min-height: 50px;
  128. }
  129. .embed .embed-fields .embed-field.embed-field-inline {
  130.     min-width: 50px;
  131. }
  132. /* Function: Hide "add new reaction" button in a row what already reach reactions limit. */
  133. .reactions > div:nth-child(n + 21) {
  134.     display: none;
  135. }
  136. /* Function: Expand guild list to multiple columns. */
  137. .guilds-wrapper:hover {
  138.     width: 260px;
  139.     transition: width .3s ease-out .0s;
  140. }
  141. .guilds-wrapper:hover .scroller-wrap {
  142.     width: 278px;
  143. }
  144. .guilds-wrapper:hover .guilds {
  145.     -webkit-flex-direction: row;
  146.     flex-direction: row;
  147.     -webkit-flex-wrap: wrap;
  148.     flex-wrap: wrap;
  149.     -webkit-justify-content: space-around;
  150.     justify-content: space-around;
  151.     -webkit-align-items: stretch;
  152.     align-items: stretch;
  153.     -webkit-align-content: flex-start;
  154.     align-content: flex-start;
  155.     display: flex;
  156.     padding: 18px 0 18px 0;
  157. }
  158. .guilds-wrapper:hover .guilds > div.guild:first-child {
  159.     display: block;
  160.     margin: 0 auto;
  161. }
  162. .guilds-wrapper:hover .guilds .friends-online {
  163.     width: 100%;
  164. }
  165. .guilds-wrapper:hover .dms {
  166.     -webkit-flex-direction: row;
  167.     flex-direction: row;
  168.     -webkit-flex-wrap: wrap;
  169.     flex-wrap: wrap;
  170.     -webkit-justify-content: space-around;
  171.     justify-content: space-around;
  172.     -webkit-align-items: stretch;
  173.     align-items: stretch;
  174.     -webkit-align-content: flex-start;
  175.     align-content: flex-start;
  176.     display: flex;
  177.     margin-top: 0;
  178.     width: 100%;
  179. }
  180. .guilds-wrapper:hover .dms .guild:first-child {
  181.     margin-top: 8px;
  182. }
  183. .guilds-wrapper:hover .dms .guild {
  184.     margin-left: 4px;
  185.     margin-right: 8px;
  186. }
  187. .guilds-wrapper:hover .guild-separator {
  188.     width: 100%;
  189. }
  190. .guilds-wrapper:hover .guilds > div.guild:nth-child(n+1) {
  191.     display: inline-block;
  192.     margin-left: 8px;
  193.     margin-right: 8px;
  194. }
  195. .guilds-wrapper:hover .guilds .guild.unread:not(.selected):before {
  196.     clip: rect(0px,10px,10px,5px);
  197.     /*background: transparent;
  198.     margin-top: -4px;
  199.     margin-right: -4px;
  200.     margin-left: 4px;
  201.     content: "►";
  202.     font-size: 10px;
  203.     color: var(--gold-color);*/
  204. }
  205. /*.guilds-wrapper:hover .guilds .guild.unread:hover:not(.selected):before {
  206.     animation: spin 1.33s linear 0s infinite;
  207.     transform-origin: 35px 0px;
  208. }
  209. @keyframes spin {
  210.     0% {
  211.         transform: rotate(0deg);
  212.     }
  213.     50% {
  214.         transform: rotate(180deg);
  215.     }
  216.     100% {
  217.         transform: rotate(360deg);
  218.     }
  219. }*/
  220. .guilds-wrapper:hover .guilds .guild.selected .guild-inner {
  221.     box-shadow: var(--forum-gold-shadow);
  222. }
  223. .guilds-wrapper:hover .guilds .guild.selected:before {
  224.     background: var(--gold-color);
  225.     content: "";
  226.     clip: rect(0px,10px,50px,5px);
  227. }
  228. #friends .friends-table .friends-column-name {
  229.     width: 20vw;
  230.     min-width: 230px;
  231.     max-width: 33%;
  232. }
  233. #friends .friends-table .friends-row .friends-column-guilds .avatar-small {
  234.     transform: scale(1);
  235.     transition: transform .35s cubic-bezier(.18, .89, .32, 1.28);
  236. }
  237. #friends .friends-table .friends-row .friends-column-guilds .avatar-small:hover {
  238.     transform: scale(2);
  239.     z-index: 2 !important;
  240. }
  241. /*.messages.scroller > div:last-child {
  242.     margin-bottom: calc(100vh - 54px - 96px - 380px);
  243. }*/
  244. /* Function: make tooltip mouse inresponsivle */
  245. .tooltip {
  246.     pointer-events: none;
  247. }
  248.  
  249. /* Trying to stick avatar if it become the screen in long posts from one user.
  250. .message-group {
  251.     display: flex;
  252.     position: unset !important;
  253.     background: #36393e;
  254.     overflow-y: auto;
  255. }
  256. .message-group > .avatar-large {
  257.     position: sticky;
  258.     top: 5px;
  259. }*/
  260.  
  261. /* Function: show rainbow in a header */
  262. .typeWindows-15E0Ys {
  263.     height: 0;
  264.     margin-top: 0;
  265.     padding-top: 4px;
  266.     background: linear-gradient(90deg, hsl(0, 100%, 25%), hsl(10, 100%, 25%), hsl(20, 100%, 25%), hsl(30, 100%, 25%), hsl(40, 100%, 25%), hsl(50, 100%, 25%), hsl(60, 100%, 25%), hsl(70, 100%, 25%), hsl(80, 100%, 25%), hsl(90, 100%, 25%), hsl(100, 100%, 25%), hsl(110, 100%, 25%), hsl(120, 100%, 25%), hsl(130, 100%, 25%), hsl(140, 100%, 25%), hsl(150, 100%, 25%), hsl(160, 100%, 25%), hsl(170, 100%, 25%), hsl(180, 100%, 25%), hsl(190, 100%, 25%), hsl(200, 100%, 25%), hsl(210, 100%, 25%), hsl(220, 100%, 25%), hsl(230, 100%, 25%), hsl(240, 100%, 25%), hsl(250, 100%, 25%), hsl(260, 100%, 25%), hsl(270, 100%, 25%), hsl(280, 100%, 25%), hsl(290, 100%, 25%), hsl(300, 100%, 25%), hsl(310, 100%, 25%), hsl(320, 100%, 25%), hsl(330, 100%, 25%), hsl(340, 100%, 25%), hsl(350, 100%, 25%), hsl(360, 100%, 25%));
  267.     background-size: 1000% 1000%;
  268.     animation: rottitlec2 20s linear 0s infinite;
  269.     /*background-color: #ff8888;
  270.     background-image: url(http://cssdeck.com/uploads/media/items/7/7uo1osj.gif) repeat-x;
  271.     animation: rottitlec 15s linear 0s infinite;*/
  272. }
  273. @keyframes rottitlec {
  274.     100% {
  275.         filter: hue-rotate(360deg);
  276.     }
  277. }
  278. @keyframes rottitlec2 {
  279.     0% {
  280.         background-position: 0% 50%;
  281.     }
  282.     100% {
  283.         background-position: calc(100% - 100vw) 50%;
  284.     }
  285. }
  286.  
  287. /*.channel-members {
  288.     display: flex;
  289.     flex-direction: column;
  290.     flex-wrap: nowrap;
  291. }
  292. .channel-members .member {
  293.     overflow: visible;
  294.     position: relative;
  295. }
  296. .channel-members .member:hover {
  297.     z-index: 2;
  298. }
  299. .channel-members .member .member-activity-text {
  300.     overflow: visible;
  301.     display: none;
  302. }
  303. .channel-members .member:hover .member-activity-text {
  304.     display: unset;
  305.     z-index: 5;
  306.     position: absolute;
  307.     top: 11px;
  308.     background: #282b30;
  309. }
  310. .channel-members > div[style] {
  311.     flex-shrink: 0;
  312.     flex-grow: 1;
  313. }*/
  314. /* Function: Fix inviting button width */
  315. .wrapper-uAa07y {
  316.     width: unset !important;
  317. }
  318. .guildInfo-mu0TQL {
  319.     max-width: 400px !important;
  320. }
  321. /* Function: Make channels smaller in height and more combact. */
  322. /*.scroller-NXV0-d {
  323.     transform: scaleY(.5);
  324.     transform-origin: top center;
  325.     height: calc(200vh - 230px);
  326. }*/
  327. /* Channel reposition example. But it work on all servers
  328. .scroller-NXV0-d {
  329.     display: flex;
  330.     flex-direction: column;
  331. }
  332. .scroller-NXV0-d .container-8 {
  333.     order: -1;
  334. } */
  335. /* Function: Make profile avatar bigger. */
  336. .header-2Lg0Oe {
  337.     padding: 20px; /*10px 10px 10px 20px;*/
  338. }
  339. .profile-3z9uol {
  340.     height: 128px;
  341.     width: 128px;
  342. }
  343. /* orig SVG mask (fixed):
  344. <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
  345.   <path d="M83.9390209,67.5703502 C87.7930646,60.9355756 90,53.2255165 90,45 C90,20.1471863 69.8528137,0 45,0 C20.1471863,0 0,20.1471863 0,45 C0,69.8528137 20.1471863,90 45,90 C53.2255165,90 60.9355756,87.7930646 67.5703502,83.9390209 C66.5710085,82.1878304 66,80.1605983 66,78 C66,71.372583 71.372583,66 78,66 C80.1605983,66 82.1878304,66.5710085 83.9390209,67.5703502 Z"/>
  346. </svg>
  347.  
  348. * new:
  349. <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
  350.   <path d="M83.9390209,67.5703502 C87.7930646,60.9355756 90,53.2255165 90,45 C90,20.1471863 69.8528137,0 45,0 C20.1471863,0 0,20.1471863 0,45 C0,69.8528137 20.1471863,90 45,90 C53.2255165,90 60.9355756,87.7930646 67.5703502,83.9390209 C66.5710085,82.1878304 66,80.1605983 66,78 C66,71.372583 71.372583,66 78,66 C80.1605983,66 82.1878304,66.5710085 83.9390209,67.5703502 Z"/>
  351. </svg>
  352.  
  353. mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cg%20transform%3D%22scale%28128%2C%20128%29%22%3E%3Cpath%20d%3D%22M0.9222222222222223%2C0.7444444444444445C0.9666666666666667%2C0.6666666666666666%2C0.5888888888888889%2C0.5C1%2C0.2222222222222222%2C0.5%2C0C0.2222222222222222%2C0%2C0.2222222222222222%2C0.5C0%2C0.7666666666666667%2C100.5%2C1C0.5888888888888889%2C100.66666666666667%2C0.9666666666666667%2C0.9222222222222223C0.7333333333333333%2C0.9111111111111111%2C0.8888888888888888%2C0.80.73333333333333336666666666667C66%2C0.7888888888888889%2C74.2%2C0.7333333333333333C0.8888888888888888%2C74.24444444444444%2C0.7333333333333333%2C0.7444444444444445Z%22/%3E%3C/g%3E%3C/svg%3E) !important;
  354. */
  355. .maskProfile-MeBve8 {
  356.     -webkit-mask-position: right bottom;
  357.     mask-position: right bottom;
  358.     -webkit-mask-size: cover;
  359.     mask-size: cover;
  360.     -webkit-mask-repeat: no-repeat;
  361.     mask-repeat: no-repeat;
  362. }
  363. .statusProfile-29OBzn {
  364.     bottom: 3.3333%;
  365.     height: 20%;
  366.     right: 3.3333%;
  367.     width: 20%;
  368. }
  369. .header-2Lg0Oe > .button-2t3of8 {
  370.     position: absolute !important;
  371.     bottom: 252px;
  372.     right: 10px;
  373.     opacity: .4;
  374.     transition: opacity .2s ease-in;
  375. }
  376. .header-2Lg0Oe > .button-2t3of8:hover {
  377.     opacity: 1;
  378. }/*
  379. .headerInfo-Gkqcz9 {
  380.     text-align: center !important;
  381.     position: relative;
  382.     bottom: 12px;
  383. }
  384. .nameTag-2n-N0D {
  385.     max-width: unset !important;
  386. }
  387. .headerInfo-Gkqcz9 > div > .flex-3B1Tl4 {
  388.     justify-content: center !important;
  389. }*/
  390. .with-background .headerInfo-Gkqcz9 {
  391.     background-color: rgba(255,255,255,0) !important;
  392. }
  393. .with-background .headerInfo-Gkqcz9:after {
  394.     background-color: rgba(0,0,0,.2) !important;
  395. }
  396.  
  397. /* Function: Change selection color.
  398. ::-webkit-selection {
  399.     color: #000;
  400.     background: none repeat scroll 100% 0% transparent;
  401.     text-shadow: 0 0 1px rgba(0, 0, 0, .33), 0px 0px 2px #0048FF;
  402. }
  403. ::-moz-selection {
  404.     color: #000;
  405.     background: none repeat scroll 100% 0% transparent;
  406.     text-shadow: 0 0 1px rgba(0, 0, 0, .33), 0px 0px 2px #0048FF;
  407. }
  408. ::selection {
  409.     color: #000;
  410.     background: none repeat scroll 100% 0% transparent;
  411.     text-shadow: 0 0 1px rgba(0, 0, 0, .33), 0px 0px 2px #0048FF;
  412. }
  413. a::-webkit-selection {
  414.     color: #000;
  415.     background: none repeat scroll 0% 0% transparent;
  416.     text-shadow: 2px 2px 2px #0048FF, 0 0 1px #FFF !important;
  417. }
  418. a::-moz-selection {
  419.     color: #000;
  420.     background: none repeat scroll 0% 0% transparent;
  421.     text-shadow: 2px 2px 2px #0048FF, 0 0 1px #FFF !important;
  422. }
  423. a::selection {
  424.     color: #000;
  425.     background: none repeat scroll 0% 0% transparent;
  426.     text-shadow: 2px 2px 2px #0048FF, 0 0 1px #FFF !important;
  427. }
  428. input::-webkit-selection {
  429.     color: #3356C6 !important;
  430.     background: none repeat scroll 0% 0% transparent;
  431.     text-shadow: 0 0 1px rgba(255, 255, 255, .5);
  432. }
  433. input::-moz-selection {
  434.     color: #3356C6 !important;
  435.     background: none repeat scroll 0% 0% transparent;
  436.     text-shadow: 0 0 1px rgba(255, 255, 255, .5);
  437. }
  438. input::selection {
  439.     color: #3356C6 !important;
  440.     background: none repeat scroll 0% 0% transparent;
  441.     text-shadow: 0 0 1px rgba(255, 255, 255, .5);
  442. }*/
  443.  
  444. /* Special styles */
  445. .guilds-wrapper .guilds .guild.unread.bump::before { content: ''; background: #FFFFC6; }
  446. .guilds-wrapper .guilds .guild.unread.channel-typing::before { content: '';  background: #FFFFFF; }
  447. .channels-wrap .scroller-fzNley .containerDefault-7RImuF.bump::before { content: '';  background: blue; }
  448. .channels-wrap .scroller-fzNley .containerDefault-7RImuF.channel-typing::before { content: ''; background: green; }
  449.  
  450. /*.channel-members > h2.members-collapsed ~ div.member {
  451.     display: none;
  452. }
  453. .channel-members > h2:not(.members-collapsed) ~ div.member {
  454.     display: flex;
  455. }*/
  456.  
  457. /* Function: Turn on offline mode! (cached only, or if Discord fall, but external services - not) */
  458. .container-2oOGIt {
  459.     opacity: .92 !important;
  460.     background: transparent !important;
  461.     pointer-events: none;
  462. }
  463. .container-2oOGIt > div {
  464.     background: #383136 !important; /*#2f3136*/
  465. }
  466. .content-3dsgDG {
  467.     align-self: flex-end;
  468.     position: fixed;
  469.     left: 70px;
  470.     bottom: 65px;
  471.     width: 240px;
  472.     box-shadow: 0 10px 10px 5px #383136, 0 -10px 10px 5px #383136;
  473.     clip: rect(-20px, 240px, 300px, 0px);
  474. }
  475. .problems-2jwWfL {
  476.     position: fixed !important;
  477.     top: 0px;
  478.     bottom: unset !important;
  479.     left: unset !important;
  480.     right: unset !important;
  481.     padding: 30px 20px 10px !important;
  482.     box-shadow: 0 0 5px 10px #383136;
  483.     pointer-events: auto;
  484. }
  485.  
  486. /* Function: Fix old unwrapping hack. */
  487. .embedInner-t4ag7g {
  488.     /*padding: 0 0 !important;*/
  489.     overflow: visible !important;
  490. }/*
  491. .embedInner-t4ag7g .embedContent-AqkoYv {
  492.     margin: 8px 10px;
  493. }*/
  494.  
  495. /* Function: Enable game selection in profile. */
  496. .contentGameImageProfile-3iVaFK > .nameNormal-1LgIgN {
  497.     user-select: text;
  498. }
  499. .contentGameImageProfile-3iVaFK > .nameNormal-1LgIgN::-webkit-selection {
  500.     background: darkred;
  501. }
  502. .contentGameImageProfile-3iVaFK > .nameNormal-1LgIgN::selection {
  503.     background: darkred;
  504. }
  505.  
  506. /* Function: Scaling video to fullwidth (depend on monitor adjust scale factor). */
  507. .embedInner-t4ag7g > .embedVideo-3EiCm6 {
  508.     transition: .15s linear 1.2s;
  509.     left: 0;
  510.     z-index: 100 !important;
  511.     transform-origin: center center;
  512. }
  513. .embedInner-t4ag7g > .embedVideo-3EiCm6:hover {
  514.     transition: .15s linear .3s;
  515.     position: relative;
  516.     transform: scale(3);
  517.     transform-origin: center center;
  518.     z-index: 101 !important;
  519.     left: 19vw;
  520.     background: rgba(0, 0, 0, .3);
  521.     padding: 16px;
  522. }
  523. .embedInner-t4ag7g > .embedVideo-3EiCm6:focus-within {
  524.     transition: .15s linear .3s;
  525.     position: relative;
  526.     transform: scale(3);
  527.     transform-origin: center center;
  528.     z-index: 101 !important;
  529.     left: 19vw;
  530.     background: rgba(0, 0, 0, .3);
  531.     padding: 16px;
  532. }
  533. .message-group.hide-overflow {
  534.     overflow: visible !important;
  535. }
  536.  
  537. /* Function: Make width of embedded raw videos up to 520px. A bit buggy selector. */
  538. .embed-2diOCQ > .embedVideo-3EiCm6, .embed-2diOCQ > .embedVideo-3EiCm6 > .imageWrapper-38T7d9 {
  539.     width: 520px !important;
  540.     height: unset !important;
  541. }
  542. .embed-2diOCQ > .embedVideo-3EiCm6 .wrapper-GhVnpx {
  543.     width: 100% !important;
  544.     height: unset !important;
  545. }
  546.  
  547. /* Function: Resizing channel width to minimal
  548. .channels-3g2vYe {
  549.     width: 60px;
  550. }
  551. .channels-3g2vYe:hover {
  552.     width: 240px;
  553. }*/
  554.  
  555. /** DESYNC **/
  556. /*::-webkit-selection {
  557.     color: transparent;
  558.     background: none repeat scroll 100% 0% transparent;
  559.     text-shadow: -.05em 0 .025em rgb(30, 242, 241), .05em 0 .025em rgb(246, 5, 10);
  560. }
  561. ::-moz-selection {
  562.     color: transparent;
  563.     background: none repeat scroll 100% 0% transparent;
  564.     text-shadow: -.05em 0 .025em rgb(30, 242, 241), .05em 0 .025em rgb(246, 5, 10);
  565. }
  566. ::selection {
  567.     color: transparent;
  568.     background: none repeat scroll 100% 0% transparent;
  569.     / *text-shadow: 0px 0px 0px rgba(128, 255, 128, .5), -.66px 0px .33px rgba(255, 128, 128, 1), .66px 0px 0px rgba(128, 128, 255, 1);* /
  570.     text-shadow: -.05em 0 .025em rgb(30, 242, 241), .05em 0 .025em rgb(246, 5, 10);
  571. }
  572. input, textarea {
  573.     color: rgba(216, 237, 231, .66) !important;
  574.     filter: drop-shadow(-.1em 0 .05em rgb(30, 242, 241)) drop-shadow(.1em 0 .05em rgb(246, 5, 10));
  575.     / *border: 1px solid transparent;
  576.     background: transparent !important;
  577.     box-shadow: -.05em 0 .025em rgb(30, 242, 241), .05em 0 .025em rgb(246, 5, 10);* /
  578. }
  579. input::selection, textarea::selection {
  580.     color: rgba(39, 18, 24, .66) !important;
  581. }
  582. .theme-dark, .default, .sidebar, .scrollerWrap-2uBjct, .scroller, .channel-members > *, .title-qAcLxz > *, .header-1tSljs, .popout-open, .popout-menu-item, .userPopout-4pfA0d > * > *, .tab-bar-item:hover {
  583.     filter: drop-shadow(1px 0 1px rgb(30, 242, 241)) drop-shadow(-1px 0 1px rgb(246, 5, 10));
  584. }*/
  585.  
  586. /* crashtest stuff:
  587. * {
  588.     filter: hue-rotate(30deg); transition: filter .5s linear;
  589. }
  590. *:hover {
  591.     filter: hue-rotate(0deg);
  592. }
  593. .hljs { filter: saturate(4) brightness(2) contrast(3) hue-rotate(0deg); transition: filter 5s linear 0s; }
  594. .hljs:hover { filter: saturate(4) brightness(2) contrast(3) hue-rotate(360deg); }
  595. .member-username-inner, .theme-dark .message-group h2 strong, .member-role { animation: rotc 15s linear 0s infinite; }
  596. @keyframes rotc {
  597.     0% {
  598.         filter: hue-rotate(0deg);
  599.     }
  600.     50% {
  601.         filter: hue-rotate(180deg);
  602.     }
  603.     100% {
  604.         filter: hue-rotate(360deg);
  605.     }
  606. }*/
  607. /*.markup, .comment {
  608.     transform-origin: 50% 50% 0; transform: matrix(1, 0, 0, -1, 0, 0);
  609. }
  610. .markup:hover, .comment:hover {
  611.     transform: matrix(1, 0, 0, 1, 0, 0);
  612. }
  613. .message-group {
  614.     transform: scaleY(.4);
  615.     margin: -70px;
  616. }
  617. .embed-wrapper {
  618.     transform: scaleY(.4);
  619.     margin: -60px;
  620. }
  621.  
  622. .message {
  623.     transform: scaleY(.4);
  624.     margin: -14px;
  625. }
  626. .message-group {
  627.     margin: -16px 0 -26px 0;
  628. }
  629.  
  630. div {
  631.     -webkit-text-emphasis: "🅾" #fff;
  632.     -webkit-text-emphasis-position: under;
  633.     line-height: .33 !important;
  634. }*/
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!