☰

Muah Dark Theme

Stylus dark theme for whole Muah.AI website.

目前為 2024-06-02 提交的版本，檢視 最新版本。

  1. /* ==UserStyle==
  2. @name            Muah Dark Theme
  3. @description     Stylus dark theme for whole Muah.AI website.
  4. @version         1.0.0
  5. @author          BreatFR (https://breat.fr)
  6. @namespace       https://gitlab.com/breatfr
  7. @homepageURL     https://gitlab.com/breatfr/muah
  8. @supportURL      https://www.reddit.com/r/MuahAI/comments/1603snq/a_dark_theme_make_by_me/
  9. @license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. ==/UserStyle== */
  11.  
  12. /* === Credits ===
  13. Website         https://breat.fr
  14. facebook        https://www.facebook.com/breatfroff
  15. mastodon        https://mastodon.social/@breat_fr
  16. telegram        https://t.me/breatfr
  17. vk              https://vk.com/breatfroff
  18. X (twitter)     https://x.com/breatfroff
  19. === Credits === */
  20.  
  21. @-moz-document domain("muah.ai") {
  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 !important;
  136.         background-color: skyblue !important;
  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.         border-radius: 8px 20px 20px 20px !important;
  157.         max-width: 150vh;
  158.     }
  159.  
  160.     /* Our bubbles */
  161.     div.message-content__0O12f.message-content--reverse__gS9lU > div {
  162.         background: linear-gradient(to right, #3a6186, #89253e) !important;
  163.         border-radius: 20px 8px 20px 20px !important;
  164.         max-width: 150vh;
  165.     }
  166.  
  167.     /* Make placeholder more visible in textarea */
  168.     .composer__input__d6OQi:before {
  169.         color: rgb(9, 16, 29) !important;
  170.     }
  171.  
  172.     /* Thin pink scrollbars */
  173.     ::-webkit-scrollbar {
  174.       width: 5px !important;
  175.     }
  176.  
  177.     ::-webkit-scrollbar-track {
  178.       box-shadow: inset 0 0 5px grey !important;
  179.       border-radius: 20px !important;
  180.     }
  181.  
  182.     ::-webkit-scrollbar-thumb {
  183.       background: pink !important;
  184.       border-radius: 20px !important;
  185.     }
  186.  
  187.     ::-webkit-scrollbar-thumb:hover {
  188.       background: white !important;
  189.     }
  190.  
  191.     @media (min-width: 930px) {
  192.         .swal2-container.swal2-center.swal2-backdrop-show > div {
  193.             border-radius: 10px;
  194.             width: 69vmin;
  195.         }
  196.     }
  197. }