daily pastebin goal
32%
SHARE
TWEET

Untitled

a guest Apr 16th, 2018 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* === COLOR VARIABLES === */
  2.  
  3. :root {
  4.   --darksecondary: #2d2d2d;
  5.   --darkprimary: #222222;
  6.   --accent: #b71414;
  7.   --emipurple: #4a2453;
  8.   --darkpurple: #2a094c;
  9.   --greypurple: #543670;
  10. }
  11.  
  12.  
  13. /* === GUILD SELECTION BAR === */
  14.  
  15. .guilds-wrapper {
  16.   width: 116px;
  17. }
  18.  
  19. .guilds-wrapper .scroller-wrap {
  20.   width: 130px;
  21. }
  22.  
  23. .guilds-wrapper .guilds {
  24.   display: flex;
  25.   flex-flow: row wrap;
  26.   padding-left: 0;
  27.   align-content: flex-start;
  28. }
  29.  
  30. .guilds-wrapper .guilds .guild {
  31.   margin-left: 6px;
  32.   margin-top: 8px;
  33. }
  34.  
  35. .guilds-wrapper .guilds .guild.unread::before {
  36.   left: - 2px;
  37.   z-index: 9000;
  38. }
  39.  
  40. .guilds-wrapper .guilds .guild:first-child {
  41.   position: relative;
  42.   left: 0;
  43.   margin: auto;
  44.   margin-top: 15px;
  45. }
  46. #bd-pub-li {
  47.    position: absolute;
  48.    top: -9999px;
  49.    left: -9999px;
  50. }
  51.  
  52. #bd-pub-li #bd-pub-button {
  53.   position: absolute;
  54.   width: 100%;
  55.   text-align: center;
  56. }
  57.  
  58. .guilds-wrapper .guilds .guild-separator {
  59.   position: relative;
  60.   width: 100%;
  61. }
  62.  
  63. .guilds-wrapper .guilds .friends-online {
  64.   position: relative;
  65.   width: 100%;
  66.   margin: auto;
  67.   margin-top: 5px;
  68. }
  69.  
  70. .guilds-wrapper .guilds .guild.selected:before {
  71.   display: none;
  72. }
  73.  
  74. .guilds-wrapper .guilds .guild {
  75.   position: relative;
  76. }
  77.  
  78. .guilds-wrapper .guilds .dms {
  79.   width: 100%;
  80.   position: relative;
  81.   text-align: center;
  82.   flex-flow: row wrap;
  83. }
  84. .guilds-wrapper .guilds .dms .guild {
  85.   display: inline-block;
  86.   flex-flow: row wrap;
  87.   margin-left: 7px;
  88.   align-content: flex-start;
  89. }
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97. .guilds-wrapper .guild.guilds-add:after, .guilds-wrapper .guild.guilds-add:hover:after, .guilds-wrapper .guilds .guild a:hover, .guilds-wrapper .guilds .guild.selected .guild-inner, .guilds-wrapper .guilds .guild.active .guild-inner {
  98.   background-color: transparent !important;
  99. }
  100.  
  101. .guilds-wrapper .guilds .guild.selected {
  102.   background: transparent;
  103. }
  104.  
  105. .guilds-wrapper .guilds .guild.selected .guild-inner {
  106.   background-color: transparent !important;
  107. }
  108.  
  109. .guilds-wrapper .guilds .friends-online {
  110.   display: none;
  111. }
  112.  
  113. .guilds-wrapper .guild.guilds-add {
  114.   width: 50px;
  115.   height: 50px;
  116.   border-radius: 50%;
  117.   background: var(--darkprimary);
  118.   color: var(--emipurple);
  119.   border: 1px dashed var(--emipurple);
  120.   padding: 0;
  121.   font-size: 40px;
  122.   font-weight: 200;
  123.   text-align: center;
  124.   -webkit-transition: border-color .25s ease, color .25s ease;
  125.   transition: border-color .25s ease, color .25s ease;
  126.   position: relative !important;
  127.   left: 0px !important;
  128.   top: 4px;
  129. }
  130.  
  131. .guilds-wrapper .guilds .guild-separator {
  132.   position: relative;
  133.   width: 100%;
  134.   padding-bottom: 0px;
  135.   left: 0px;
  136. }
  137. .guilds-wrapper .guilds .guild .guild-inner {
  138.   background: transparent !important;
  139. }
  140.  
  141. .guilds-wrapper .guilds .guild.audio .guild-inner:after {
  142.   top: 30px;
  143. }
  144.  
  145. /* === NOTIFICATIONS, RED CIRCLE = UNREAD MESSAGES, PURPLE SQUARE = UNREAD MESSAGES IN SELECTED GUILD, PURPLE CIRCLE WITH NUMBER = @MENTION === */
  146.  
  147. .badge {
  148.   background-color: #5f0faf;
  149.   border-radius: 50%;
  150. }
  151.  
  152. .new-messages-indicator.new-messages-indicator-mention {
  153.   background-color: (--emipurple);
  154.   border-radius: 0%;
  155. }
  156.  
  157. .guilds-wrapper .guilds .guild.selected:before, .guilds-wrapper .guilds .guild.selected.unread:before, .guilds-wrapper .guilds .guild.unread:before {
  158.   z-index: 100;
  159.   -webkit-transform: translate(50px, -20px) scale(1.2);
  160.   transform: translate(16px, 15px) scale(1.2);
  161.   background: var(--accent);
  162.   height: 12px;
  163.   width: 12px;
  164.   margin-top: 0px;
  165.   border-radius: 50%;
  166.   transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  167. }
  168.  
  169. .guilds-wrapper .guilds .guild.selected.unread:before {
  170.   visibility: visible !important;
  171.   transform: translate(40px, -3px) scale(1.2);
  172.   border-radius: 50%;
  173.   transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  174.   background: var(--greypurple);
  175. }
  176.  
  177. .guilds-wrapper .guilds .guild.selected:before {
  178.   content: "" !important;
  179.   width: 4px;
  180.   height: 64px;
  181.   display: block;
  182.   position: absolute;
  183.   top: 0;
  184.   left: 0;
  185.   color: #fff;
  186.   z-index: 100;
  187.   visibility: hidden;
  188. }
  189.  
  190. .dms .guild .badge, .guilds .guild.unread .badge, .guilds .guild .badge {
  191.   -webkit-transform: translate(-4px, -34px)!important;
  192.   transform: translate(-37px, 4px)!important;
  193.   z-index: 100;
  194. }
RAW Paste Data
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
 
Top