Advertisement
Guest User

Overlay Discord Spécial

a guest
Sep 26th, 2020
8,104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.79 KB | None | 0 0
  1. body {
  2.     --width: 100;
  3.  
  4.     --widthPX: calc(var(--width) * 1px);
  5.     --height: calc(var(--widthPX) * 1.25);
  6.     --nameHeight: calc(var(--height) - var(--widthPX));
  7.     --fontSize: calc((var(--widthPX) / 100) * 15);
  8.  
  9.     width: 100%;
  10.     overflow: hidden;
  11. }
  12.  
  13. ul {
  14.     margin-block-start: 0;
  15.     margin-block-end: 0;
  16.     position: absolute;
  17.     bottom: 0;
  18.     transform: translateX(-50%);
  19.     left: 50%;
  20. }
  21.  
  22. .voice-container .voice-states .voice-state .avatar.speaking {
  23.     opacity: 1;
  24.     filter: grayscale(0%);
  25.     outline: calc(var(--widthPX) / 20) solid #43b581;
  26.     outline-offset: calc(var(--widthPX) / 20 * -1);
  27.  
  28. }
  29.  
  30. .voice-container .voice-states {
  31.     display: flex;
  32.     align-items: center;
  33.     justify-content: center;
  34.     padding: 0;
  35. }
  36.  
  37. .voice-container .voice-states .voice-state {
  38.     width: var(--widthPX);
  39.     height: var(--height);
  40.     margin: 0px 5px;
  41.     background-color: black;
  42.     box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
  43.     position: relative;
  44.     text-align: center;
  45. }
  46.  
  47. .voice-container .voice-states .voice-state .avatar {
  48.     height: var(--widthPX);
  49.     width: 100%;
  50.     border-radius: 0;
  51.     border-width: 0;
  52.     opacity: 0.3;
  53.     filter: grayscale(100%);
  54.     transition: filter 0.15s, opacity 0.15s;
  55.     border:0;
  56. }
  57.  
  58. .voice-container .voice-states .voice-state .user {
  59.     background-color: #1e2124;
  60.     position: absolute;
  61.     bottom: 0px;
  62.     padding: 0px;
  63.     height: var(--nameHeight);
  64.     width: 100%;
  65. }
  66.  
  67. .voice-container .voice-states .voice-state .user .name {
  68.     font-size: var(--fontSize) !important;
  69.     background-color: red !important;
  70.     padding: 0px;
  71.     margin: 0px;
  72.     height:0;
  73.     position: relative;
  74.     display: inline-block;
  75.     transform: translateY(calc(var(--nameHeight) / 2 - var(--fontSize) / 2));
  76. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement