☰

Muah.AI : Dark-Theme

Put Muah.AI dark.

Versão de: 05/02/2024. Veja: a última versão.

  1. /* ==UserStyle==
  2. @name           Muah.AI : Dark-Theme
  3. @description    Put Muah.AI dark.
  4. @namespace      userstyles.world/user/breat
  5. @version        1.00
  6. @homepageURL    https://www.reddit.com/r/MuahAI/comments/1603snq/a_dark_theme_make_by_me/
  7. @author         BreatFR
  8. @license        GNU GPL v3 (https://www.gnu.org/licenses/quick-guide-gplv3.en.html)
  9. ==/UserStyle== */
  10.  
  11. /* === Credits ===
  12. Website     https://breat.fr
  13. facebook    https://www.facebook.com/breatfroff
  14. mastodon    https://mastodon.social/@breat_fr
  15. telegram    https://t.me/+5ZLC2qntf6xmYmI0
  16. vk          https://vk.com/breatfroff
  17. X (twitter) https://x.com/breatfroff
  18. === Credits === */
  19. @-moz-document domain("muah.ai") {
  20.  
  21.  
  22. /* Background and text color */
  23. select,
  24. .swal2-container.swal2-center.swal2-grow-fullscreen.borderless-container.swal2-backdrop-show div,
  25. .contact div,
  26. .modal-box,
  27. h2.swal2-title,
  28. h3.fadeIn,
  29. .screen__inner__NZe6j {
  30.     background-color: rgb(9, 16, 29);
  31.     color: white;
  32. }
  33.  
  34. .form-messages.success {
  35.     background-color: rgb(9, 16, 29);
  36.     color: palegreen;
  37. }
  38.  
  39. #account-bar,
  40. #swal2-html-container {
  41.     color: white;
  42. }
  43.  
  44. /* Heart background */
  45. .message-list__bHgr6 {
  46.     background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100%;
  47.     background-color: rgb(9, 16, 29);
  48. }
  49.  
  50. div.swal2-container.swal2-center.swal2-backdrop-show > div {
  51.     background-color: rgb(9, 16, 29);
  52. }
  53.  
  54. /* Dark emoji popup */
  55. section.emoji-mart div > :last-child,
  56. .emoji-mart-light,
  57. .emoji-mart-bar {
  58.     background-color: rgb(9, 16, 29);
  59.     border: 0px;
  60.     border-radius: 10px;
  61.     color: white;
  62. }
  63.  
  64. /* Bigger emoji popup */
  65. section.emoji-mart {
  66.     width: 31% !important;
  67. }
  68.  
  69. button.emoji-mart-emoji span{
  70.     min-height: 40px;
  71.     min-width: 40px;
  72. }
  73.  
  74. /* Bigger and white text in bubbles */
  75. .message-list__bHgr6 div {
  76.     color: white;
  77.     font-size: 20px;
  78. }
  79.  
  80. /* New color for links to be more visible */
  81. a {
  82.     color: #6ea8fe !important;
  83. }
  84.  
  85. a:hover,
  86. .footer__options__8RNsw:hover {
  87.     color: #8bb9fe !important;
  88. }
  89.  
  90. /* Change color of text in the bottom of chat and put him little bigger */
  91. .footer__options__8RNsw,
  92. .powered-by__ydftk {
  93.     color: pink;
  94.     font-size: 12px;
  95. }
  96.  
  97. /* Text between ** is now in italic and not bold */
  98. .message-bubble__puzVZ strong {
  99.     font-style: italic;
  100.     font-weight: normal;
  101. }
  102.  
  103. /* Rouded corners for images */
  104. img {
  105.     border-radius: 10px;
  106. }
  107.  
  108. /* Chat popup now take 100% screen size */
  109. .screen__POUUM {
  110.     padding:  0px !important;
  111. }
  112.  
  113. .screen__inner__NZe6j {
  114.     margin-bottom: 0px !important;
  115. }
  116.  
  117. /* Hide big button at the bottom */
  118. .button__rX4Lp {
  119.     display: none;
  120. }
  121.  
  122. /* Remove borders on input items and make text visible when selected */
  123. input {
  124.     border: 0px !important;
  125.     color: white !important;
  126. }
  127.  
  128. /* Make text in emoji search popup visible */
  129. #emoji-mart-search-1 {
  130.     color: rgb(9, 16, 29) !important;
  131. }
  132.  
  133. input::selection,
  134. input::-moz-selection {
  135.     color:black;
  136.     background-color: skyblue;
  137. }
  138.  
  139. /* Bigger avatars */
  140. .avatar__zfL8P {
  141.     height: 50px;
  142.     width: 50px;
  143. }
  144.  
  145. /* Dark emoji popup */
  146. .image-attachment__inner__yGCaU:hover {
  147.     margin-left: 80% !important;
  148.     transform: scale(2.5);
  149.     transition: transform 0.3s;
  150. }
  151.  
  152. /* Change background color of bubbles */
  153. /* AI bubbles */
  154. .message-bubble__puzVZ {
  155.     background: linear-gradient(to right, #cc2b5e, #753a88) !important;
  156.     max-width: 150vh
  157. }
  158.  
  159. /* Our bubbles */
  160. div.message-bubble__puzVZ.message-bubble--nude__8qt2J {
  161.     background: transparent !important;
  162. }
  163.  
  164. /* Make placeholder more visible in textarea */
  165. .composer__input__d6OQi:before {
  166.     color: rgb(9, 16, 29) !important;
  167. }
  168.  
  169. /* Thin pink scrollbars */
  170. ::-webkit-scrollbar {
  171.   width: 5px !important;
  172. }
  173.  
  174. ::-webkit-scrollbar-track {
  175.   box-shadow: inset 0 0 5px grey !important;
  176.   border-radius: 20px !important;
  177. }
  178.  
  179. ::-webkit-scrollbar-thumb {
  180.   background: pink !important;
  181.   border-radius: 20px !important;
  182. }
  183.  
  184. ::-webkit-scrollbar-thumb:hover {
  185.   background: white !important;
  186. }
  187.  
  188. @media (min-width: 930px) {
  189.     .swal2-container.swal2-center.swal2-backdrop-show > div {
  190.         border-radius: 10px;
  191.         width: 69vmin;
  192.     }
  193. }
  194. }