Advertisement
BappidyBoopidy

Fixed scroll for real

Apr 6th, 2018
515
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.09 KB | None | 0 0
  1. .members-1bid1J {
  2.   --bulk: 100px;
  3.   height: calc(100% + var(--bulk));
  4.   padding-bottom: calc(20px + var(--bulk));
  5. }
  6. .members-1bid1J::-webkit-scrollbar-track-piece {
  7.   margin-bottom: var(--bulk);
  8. }
  9.  
  10. #friends .scrollerWrap-2uBjct {
  11.   position: relative;
  12.   overflow-y: scroll;
  13. }
  14.  
  15. #friends .scroller-fzNley {
  16.   position: absolute;
  17.   top: 0;
  18.   bottom: unset;
  19.   left: 0;
  20.   right: 0;
  21.   overflow-y: visible;
  22. }
  23.  
  24. #friends .scrollerWrap-2uBjct::-webkit-scrollbar{
  25.     width: 7px;
  26. }
  27.  
  28. #friends .scrollerWrap-2uBjct::-webkit-scrollbar-thumb{
  29.     background-color: var(--main-color) !important;
  30. }
  31.  
  32. /* uwot nig */
  33.  
  34. #friends .friends-header {
  35.   position: relative;
  36.   height: 46px !important;
  37. }
  38.  
  39. #friends .friends-header .tab-bar {
  40.   width: 100%;
  41.   position: absolute;
  42.   top: 70px;
  43.   display: flex;
  44.   justify-content: center;
  45.   z-index: 2;
  46. }
  47.  
  48. #friends .friends-header .header-toolbar {
  49.   position: absolute;
  50.   right: 20px;
  51. }
  52.  
  53. #friends .friends-table .friends-table-body {
  54.   padding: 0;
  55.   margin-top: 2%;
  56. }
  57.  
  58. #friends .friends-header .tab-bar .tab-bar-separator,
  59. #friends .friends-table .friends-table-header .friends-column-separator {
  60.   display: none;
  61. }
  62.  
  63. #friends .friends-header .tab-bar .tab-bar-item,
  64. #friends .friends-table .friends-table-header .friends-column,
  65. #friends .friends-table .friends-row .friends-column-name,
  66. #friends .friends-table .friends-row .friends-column-status {
  67.   color: rgba(255, 255, 255, 0.7) !important;
  68. }
  69.  
  70. #friends .friends-header .btn,
  71. #friends .friends-header .tab-bar .tab-bar-item.selected {
  72.   background-color: var(--main-color) !important;
  73.   color: #fff !important;
  74. }
  75.  
  76. #friends .friends-header .tab-bar .tab-bar-item:hover:not(.selected) {
  77.   background-color: var(--hover-color) !important;
  78. }
  79.  
  80. #friends .friends-header .tab-bar .tab-bar-item {
  81.   padding: 5px 8px;
  82.   margin: 0 5px;
  83.   transition: color 500ms, background 500ms;
  84. }
  85.  
  86. #friends .friends-header .tab-bar .tab-bar-item .badge {
  87.   background: rgba(0, 0, 0, 0.4) !important;
  88.   color: #fff !important;
  89.   opacity: 0.7;
  90.   transition: opacity 500ms;
  91. }
  92.  
  93. #friends .friends-header .tab-bar .tab-bar-item:hover .badge {
  94.   opacity: 1;
  95. }
  96.  
  97. #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary {
  98.   background-color: var(--main-color) !important;
  99.   color: #fff !important;
  100. }
  101.  
  102. #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary:not(.selected):hover {
  103.   background-color: var(--hover-color);
  104. }
  105.  
  106. #friends .friends-table {
  107.   padding-top: 3px;
  108.   padding-bottom: 4px;
  109. }
  110.  
  111. #friends .friends-table .friend-table-add-wrapper {
  112.   margin-top: 20px;
  113. }
  114.  
  115. #friends .friends-table .friend-table-add-wrapper .friend-table-add-header {
  116.   background: rgba(0, 0, 0, 0.4);
  117.   box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4);
  118.   margin: 20px 30px;
  119.   border-radius: 5px;
  120. }
  121.  
  122. #friends .friends-table .friend-table-add-wrapper h2 {
  123.   color: rgba(225, 225, 225, 0.9);
  124. }
  125.  
  126. #friends .friends-table .friend-table-add-wrapper .friend-table-suggestions-header {
  127.   margin: 30px 30px 16px;
  128.   padding: 0;
  129.   border-bottom: 1px solid rgba(206, 196, 196, 0.6);
  130. }
  131.  
  132. #friends .friends-table .friend-table-add-wrapper .friend-table-suggestions-header h2 {
  133.   color: rgba(225, 225, 225, 0.9);
  134. }
  135.  
  136. #friends .friends-table .friends-table-header {
  137.   display: none;
  138. }
  139.  
  140. #friends .friends-table .friends-table-body>span {
  141.   display: flex;
  142.   flex-flow: row;
  143.   justify-content: center;
  144. }
  145.  
  146. #friends .friends-table .friends-row {
  147.   background: rgba(0, 0, 0, 0.35) !important;
  148.   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  149.   border-radius: 5px;
  150.   margin: 15px;
  151.   padding: 0;
  152.   height: 120px !important;
  153.   flex-direction: row;
  154.   flex-basis: 300px;
  155.   position: relative;
  156.   transition: opacity 300ms;
  157. }
  158.  
  159. #friends .friends-table .friends-row:hover {
  160.   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  161.   border-radius: 5px;
  162.   margin: 15px;
  163.   padding: 0;
  164.   opacity: 1 !important;
  165. }
  166.  
  167. #friends .friends-table .friends-row .avatar-small {
  168.   border-radius: 5px;
  169.   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  170. }
  171.  
  172. #friends .friends-table .friends-row+.friends-row {
  173.   border-top: none !important;
  174. }
  175.  
  176. #friends .friends-table .friends-row .friends-column {
  177.   position: absolute;
  178.   backface-visibility: hidden;
  179. }
  180.  
  181. #friends .friends-table .friends-row .friends-column+.friends-column {
  182.   margin: 0;
  183. }
  184.  
  185. #friends .friends-table .friends-row .friends-column-name .avatar-small {
  186.   top: 25px;
  187.   left: 15px;
  188.   width: 85px;
  189.   height: 85px;
  190.   background-size: 85px 85px;
  191.   opacity: 0.6;
  192.   transition: opacity 500ms, transform .2s linear, box-shadow .2s linear;
  193.   transform: scale(0.97) perspective(1px);
  194. }
  195.  
  196. #friends .friends-table .friends-row:hover .friends-column-name .avatar-small {
  197.   opacity: 0.9;
  198.   transform: scale(1) perspective(1px);
  199.   box-shadow: 1px 1px 8px 1px #000;
  200. }
  201.  
  202. #friends .friends-table .friends-row .friends-column-name .discord-tag {
  203.   display: block;
  204.   position: absolute;
  205.   top: 25px;
  206.   left: 115px;
  207.   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  208. }
  209.  
  210. #friends .friends-table .friends-row .friends-column-name .discord-tag .username {
  211.   clear: left;
  212.   width: 100px;
  213.   text-overflow: ellipsis;
  214.   white-space: nowrap;
  215.   overflow: hidden;
  216. }
  217.  
  218. #friends .friends-table .friends-row .friends-column-name .discord-tag .discriminator {
  219.   visibility: visible;
  220. }
  221.  
  222. #friends .friends-table .friends-row .friends-column-name .username {
  223.   transition: color 300ms;
  224. }
  225.  
  226. #friends .friends-table .friends-row:hover .username {
  227.   color: rgba(225, 225, 225, 1);
  228. }
  229.  
  230. #friends .friends-table .friends-row .friends-column-status {
  231.   top: 0;
  232.   width: 100%;
  233.   justify-content: center;
  234.   height: 18px;
  235. }
  236.  
  237. #friends .friends-table .friends-row .friends-column-status .status {
  238.   width: 100%;
  239.   height: 20px;
  240.   border-radius: 5px 5px 0 0 !important;
  241.   position: absolute;
  242.   top: 0;
  243.   opacity: 0.5;
  244.   z-index: 0;
  245. }
  246.  
  247. #friends .friends-table .friends-row .friends-column-status .status-text {
  248.   color: rgba(255, 255, 255, 0.5);
  249.   font-weight: 800 !important;
  250.   max-width: 90%;
  251.   font-size: 12px;
  252.   line-height: normal;
  253.   transition: color 300ms;
  254.   z-index: 0;
  255. }
  256.  
  257. #friends .friends-table .friends-row:hover .friends-column-status .status-text {
  258.   color: #fff;
  259. }
  260.  
  261. #friends .friends-table .friends-table-body .friends-row .friends-column-guilds {
  262.   /* .friends-table-body is important here */
  263.   top: 80px;
  264.   left: 115px;
  265.   width: 150px;
  266.   display: flex !important;
  267. }
  268.  
  269. #friends .friends-table .friends-table-body .friends-row .friends-column-guilds .avatar-small {
  270.   opacity: 0.7;
  271.   transition: opacity 500ms;
  272. }
  273.  
  274. #friends .friends-table .friends-table-body .friends-row:hover .friends-column-guilds .avatar-small {
  275.   opacity: 1;
  276. }
  277.  
  278. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(4),
  279. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(4) .avatar-small,
  280. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(5),
  281. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(5) .avatar-small,
  282. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(n + 6) {
  283.   display: none;
  284. }
  285.  
  286. #friends .friends-table .friends-row .friends-column-guilds .avatar-small {
  287.   background-color: rgba(0, 0, 0, 0.6);
  288. }
  289.  
  290. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn:before {
  291.   content: "";
  292.   background-color: rgba(0, 0, 0, 0.4);
  293.   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8Y2lyY2xlIGN4PSI2OS41NDUiIGN5PSIzMDYiIHI9IjY5LjU0NSIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxjaXJjbGUgY3g9IjMwNiIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+CgkJPGNpcmNsZSBjeD0iNTQyLjQ1NSIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
  294.   background-size: 18px 18px;
  295.   background-position: center center;
  296.   background-repeat: no-repeat;
  297.   border-radius: 5px;
  298.   width: 30px;
  299.   height: 30px;
  300.   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  301.   position: absolute;
  302.   top: 0;
  303. }
  304.  
  305. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn,
  306. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn:hover {
  307.   border: 0;
  308.   color: transparent !important;
  309. }
  310.  
  311. #friends .friends-table .friends-row .friends-column-actions {
  312.   top: 45px;
  313.   right: 10px;
  314.   opacity: 0;
  315.   transition: opacity 500ms;
  316.   visibility: visible;
  317. }
  318.  
  319. #friends .friends-table .friends-row:hover .friends-column-actions {
  320.   opacity: 1;
  321. }
  322.  
  323. #friends .friends-table .friends-row .friends-column-actions .friends-action {
  324.   width: 28px;
  325.   height: 28px;
  326.   transform: translateX(120px);
  327.   transition: transform 500ms, background 500ms;
  328. }
  329.  
  330. #friends .friends-table .friends-row:hover .friends-column-actions .friends-action {
  331.   transform: translateX(0px);
  332. }
  333.  
  334. #friends .friends-table .friends-row .friends-column-actions .friends-action:first-child {
  335.   background-color: rgba(73, 152, 76, 0.7);
  336. }
  337.  
  338. #friends .friends-table .friends-row .friends-column-actions .friends-action:nth-child(2) {
  339.   background-color: rgba(199, 0, 67, 0.7);
  340.   transition-delay: 200ms;
  341. }
  342.  
  343. #friends .friends-table .friends-row .friends-suggestion-inner {
  344.   padding: 20px;
  345. }
  346.  
  347. #friends .friends-table .friends-row .friends-suggestion-inner .avatar-large {
  348.   border-radius: 5px;
  349.   opacity: 0.6;
  350.   transition: opacity 500ms;
  351. }
  352.  
  353. #friends .friends-table .friends-row:hover .friends-suggestion-inner .avatar-large {
  354.   opacity: 0.7;
  355. }
  356.  
  357. #friends .friends-table .friends-row .friends-suggestion-inner .friends-suggestion-info .discord-tag .username {
  358.   color: rgba(225, 225, 225, 0.6);
  359.   width: 100px;
  360.   white-space: nowrap;
  361.   overflow: hidden;
  362.   text-overflow: ellipsis;
  363.   transition: color 500ms;
  364. }
  365.  
  366. #friends .friends-table .friends-row:hover .friends-suggestion-inner .friends-suggestion-info .discord-tag .username {
  367.   color: rgba(225, 225, 225, 0.9);
  368. }
  369.  
  370. #friends .friends-table .friends-row .friends-suggestion-inner .friends-suggestion-info .discord-tag .discriminator {
  371.   color: rgba(225, 225, 225, 0.7);
  372.   visibility: visible;
  373. }
  374.  
  375. #friends .friends-table .friends-row .friends-suggestion-inner~.friends-column-actions {
  376.   display: flex;
  377.   flex-direction: column;
  378.   padding: 5px 25px 0 0;
  379. }
  380.  
  381. #friends .friends-table .friends-row .friends-suggestion-inner~.friends-column-actions .friends-action:nth-child(2) {
  382.   margin: 5px 0 0 0;
  383. }
  384.  
  385. @media (max-width:1300px) {
  386.   #friends .friends-table .friends-table-header .friends-column-guilds,
  387.   #friends .friends-table .friends-table-header .friends-column-guilds+.friends-column-separator,
  388.   #friends .friends-table .friends-row .friends-column-guilds {
  389.     display: block !important;
  390.   }
  391. }
  392.  
  393. #friends .friends-empty p {
  394.   color: rgba(225, 225, 225, 0.8);
  395. }
  396.  
  397. .theme-dark #friends .friends-table .friends-row .friends-column-actions .friends-action:hover {
  398.   background-color: rgb(73, 152, 76);
  399. }
  400.  
  401. #friends .friends-table .friends-row .friends-column-status .status.status-unknown {
  402.   border: none;
  403. }
  404.  
  405. #friends .friends-table .friends-row .friends-column-actions .friends-action.friends-action-remove:hover {
  406.   background-color: rgb(199, 0, 67) !important;
  407. }
  408.  
  409. #friends .friends-table .friends-table-body {
  410.   display: flex !important;
  411.   flex-flow: row wrap !important;
  412.   justify-content: safe !important;
  413.   align-items: center;
  414.   padding-left: 26px;
  415. }
  416.  
  417. .friends-table-body[class*="scroller"] .friends-row {
  418.   min-width: 20%;
  419. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement