☰

AWBW: Color-Blinded-Friendly Status Icon

Make respective status icon unique shape that looks just like discord

  1. /* ==UserStyle==
  2. @name         AWBW: Color-Blinded-Friendly Status Icon
  3. @version      20240130.19.14
  4. @namespace    https://userstyles.world/user/hollen9
  5. @description  Make respective status icon unique shape that looks just like discord
  6. @author       hollen9
  7. @license      MIT
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("amarriner.com") {
  11. span.dot_yellow::before {
  12.     content: "" !important;
  13.     height: 4px !important;
  14.     width: 4px !important;
  15.     border-radius: 50% !important;
  16.     position: absolute !important;
  17.     top: 10px !important;
  18.     left: 12px !important;
  19.     box-shadow: 2px 2px 0 0 #111 !important;
  20. }
  21.  
  22.  
  23. span.dot_yellow {
  24.     height: 6px !important;
  25.     width: 6px !important;
  26.     background-color: yellow !important;
  27.     border: solid 0px #000000 !important;
  28.     border-radius: 50% !important;
  29.     display: inline-block !important;
  30.     box-shadow: 0px 0px 0 0.7px #111 !important;
  31. }
  32.  
  33. span.dot_gray::before {
  34.     content: "" !important;
  35.     height: 4px !important;
  36.     width: 4px !important;
  37.     border-radius: 50% !important;
  38.     position: absolute !important;
  39.     top: 10px !important;
  40.     left: 12px !important;
  41.     box-shadow: 3px 3px 0 -0.3px #EEE !important;
  42. }
  43.  
  44. span.dot_red::before {
  45.     content: '';
  46.     position: absolute;
  47.     left: 15px;
  48.     top: 14px;
  49.     width: 4px;
  50.     height: 2px;
  51.     background: #111;
  52.     border-radius: 15%;
  53. }
  54.  
  55. .player-activity-status.dot_yellow::before,
  56. .player-activity-status.dot_gray::before,
  57. .player-activity-status.dot_red::before{
  58.     top: -2px !important;
  59.     left: -2px !important;
  60. }
  61.  
  62.  
  63. }