☰

Mistral Chat responsive + customizations

Mistral Chat website is more suitable for wide screens.

当前为 2025-01-06 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Mistral Chat responsive + customizations
  3. @version        1.0.6
  4. @description    Mistral Chat website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/mistral
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    darkmode                "Better dark mode"                      1
  13. @var    checkbox    avatar                  "Custom avatar for us"                  0
  14. @var    text        avatarurl               "Custom avatar URL"                     "URL between quotes"
  15. @var    checkbox    cmmistralavatar         "Custom Mistral avatar"                 0
  16. @var    text        cmmistralavatarurl      "Custom Mistral avatar URL"             "URL between quotes"
  17. @var    text        cmmistralavatarsize     "Custom Mistral avatar size"            256px
  18. @var    text        cmmistralavatarcorner   "Custom Mistral avatar corner"          50%
  19. @var    text        fontsize                "Custom font size"                      1.2rem
  20. @var    checkbox    widemode                "Wide mode"                             1
  21. ==/UserStyle== */
  22.  
  23. /* === Credits ===
  24. Website         https://breat.fr
  25. facebook        https://www.facebook.com/breatfroff
  26. mastodon        https://mastodon.social/@breat_fr
  27. telegram        https://t.me/breatfr
  28. vk              https://vk.com/breatfroff
  29. X (twitter)     https://x.com/breatfroff
  30. === Credits === */
  31.  
  32. @-moz-document domain("chat.mistral.ai") {
  33.     /* Theme */
  34.     /* Versions */
  35.     :root {
  36.         --themeversion: 'Theme v1.0.6 by BreatFR (https://breat.fr)';
  37.         --install1: ' usercssjs.breat.fr \A';
  38.         --install2: ' gitlab.com/breatfr/mistral \A \A';
  39.         --support1: ' ko-fi.com/breatfr \A';
  40.         --support2: ' paypal.me/breat';
  41.     }
  42.  
  43.     @media (min-width: 900px) {
  44.         body:not(:has(span[class="w-fit max-w-full truncate text-lg font-medium text-secondary-400 dark:text-secondary-400"])) [data-sidebar="trigger"]::after {
  45.             background: linear-gradient(88.55deg, rgb(253, 73, 2) 22.43%, rgb(254, 206, 0) 92.28%);
  46.             background-clip: text;
  47.             -webkit-background-clip: text;
  48.             color: transparent;
  49.             content: var(--themeversion);
  50.             display: block;
  51.             font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  52.             font-size: 1.2rem;
  53.             left: 50%;
  54.             line-height: 1.5;
  55.             max-width: max-content;
  56.             pointer-events: none;
  57.             position: absolute;
  58.             text-align: center;
  59.             top: .25em;
  60.             transform: translateX(-50%);
  61.             width: 100%;
  62.             white-space: wrap;
  63.         }
  64.     }
  65.     
  66.     [data-state="expanded"] [data-sidebar="sidebar"]::after {
  67.         background: linear-gradient(88.55deg, rgb(253, 73, 2) 22.43%, rgb(254, 206, 0) 92.28%);
  68.         background-clip: text;
  69.         -webkit-background-clip: text;
  70.         bottom: 1em;
  71.         color: transparent;
  72.         content: 'Install: \A' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) 'Support me: \A' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
  73.         display: block;
  74.         font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  75.         font-size: 1.2rem;
  76.         left: 0;
  77.         line-height: 1.5;
  78.         max-width: 256px;
  79.         pointer-events: none;
  80.         position: fixed;
  81.         text-align: center;
  82.         width: 100%;
  83.         white-space: pre-line;
  84.     }
  85.  
  86.     body {
  87.         overflow-x: hidden;
  88.     }
  89.     
  90.     /* Custom font size */
  91.     .prose,
  92.     code,
  93.     textarea,
  94.     .max-w-screen-md:has(textarea) button {
  95.         font-size: fontsize !important;
  96.         line-height: 1.5 !important;
  97.     }
  98.     textarea.py-2 {
  99.         min-height: max-content !important;
  100.     }
  101.     
  102.     if avatar {
  103.         [data-sidebar="header"] button:nth-of-type(1) > div:nth-of-type(1) {
  104.             background: transparent;
  105.             color: transparent;
  106.         }
  107.         [class="group relative flex w-full gap-3"] > span > span {
  108.             display: none;
  109.         }
  110.         [data-sidebar="menu-button"] > div:nth-of-type(1):before,
  111.         [class="group relative flex w-full gap-3"] > span:before {
  112.             background: url(avatarurl) no-repeat center center / cover;
  113.             border-radius: 50%;
  114.             content: "";
  115.             display: inline-block;
  116.             height: 32px;
  117.             width: 32px;
  118.         }
  119.     }
  120.     
  121.     if cmmistralavatar {
  122.         [class="flex h-full w-full flex-1 flex-col items-center justify-center gap-5"] > div:nth-of-type(1) {
  123.             max-height: fit-content;
  124.         }
  125.         [class="flex h-full w-full flex-1 flex-col items-center justify-center gap-5"] > div:nth-of-type(1) > div {
  126.             align-items: center !important;
  127.             justify-content: center;
  128.         }
  129.         [class="flex h-full w-full flex-1 flex-col items-center justify-center gap-5"] > div:nth-of-type(1) > div > div {
  130.             margin-bottom: 1rem;
  131.             max-width: 100%;
  132.         }
  133.         [class="flex h-full w-full flex-1 flex-col items-center justify-center gap-5"] > div:nth-of-type(2) {
  134.             display: none !important;
  135.             height: 0 !important;
  136.         }
  137.         [class="flex h-full w-full flex-1 flex-col items-center justify-center gap-5"] > div:nth-of-type(3) {
  138.             bottom: 0;
  139.             max-width: calc(100% - 17rem);
  140.             position: fixed;
  141.             top: auto !important;
  142.         }
  143.         
  144.         [class="mb-32 flex flex-col items-stretch"] img[class="block dark:hidden"],
  145.         [class="mb-32 flex flex-col items-stretch"] img[class="hidden dark:block"] {
  146.             aspect-ratio: 1 / 1;
  147.             background: url(cmmistralavatarurl) no-repeat center center / cover;
  148.             border-radius: cmmistralavatarcorner;
  149.             height: 0;
  150.             margin: 0 auto;
  151.             padding-left: cmmistralavatarsize;
  152.             padding-top: cmmistralavatarsize;
  153.             width: 0;
  154.         }
  155.         
  156.         [class="flex w-full gap-3"] > div:nth-of-type(1) > div img,
  157.         [class="group flex w-full gap-3"] > div:nth-of-type(1) > div img {
  158.             aspect-ratio: 1 / 1;
  159.             background: url(cmmistralavatarurl) no-repeat center center / cover;
  160.             border-radius: 50%;
  161.             padding-left: 32px;
  162.             padding-top: 32px;
  163.         }
  164.     }
  165.     
  166.     if chatmode {
  167.         [class="group relative flex w-full gap-3"] > span {
  168.             order: 2;
  169.         }
  170.         [class="group relative flex w-full gap-3"] > div {
  171.             order: 1;
  172.         }
  173.         [class="group relative flex w-full gap-3"] {
  174.             align-self: flex-end !important;
  175.             justify-content: flex-end !important;
  176.             max-width: 80% !important;
  177.             width: fit-content !important;
  178.         }
  179.         [class="group relative flex w-full gap-3"] * {
  180.             justify-content: flex-end !important;
  181.             margin-left: auto !important;
  182.         }
  183.         [class="group flex w-full gap-3"] > div {
  184.             max-width: 80%;
  185.         }
  186.     }
  187.     
  188.     if darkmode {
  189.         .dark,
  190.         .light {
  191.             --background: 240 5.9% 10%;
  192.             --secondary-200: 240 5.9% 10%;
  193.             --sidebar-background: 0 0% 5%;
  194.         }
  195.         
  196.         .shadow-lg:not([data-radix-popper-content-wrapper] > div) {
  197.             box-shadow: rgba(255, 149, 0, 0.4) -2px -2px 2px 2px,
  198.                         rgba(255, 149, 0, 0.4) -2px 2px 2px 2px,
  199.                         rgba(255, 69, 0, 0.4) 2px -2px 2px 2px,
  200.                         rgba(255, 69, 0, 0.4) 2px 2px 2px 2px;
  201.         }
  202.     
  203.         /* Mistral logo/avatar */
  204.         img[class="block dark:hidden"],
  205.         img[class="hidden dark:block"] {
  206.             background: url("https://gitlab.com/uploads/-/system/project/avatar/65782442/mistral.png") no-repeat center center / cover;
  207.             height: 0;
  208.             padding-left: 192px;
  209.             padding-top: 192px;
  210.             margin-bottom: 7em;
  211.             width: 0;
  212.         }
  213.         [class="flex w-full gap-3"] > div:nth-of-type(1) > div img,
  214.         [class="group flex w-full gap-3"] > div:nth-of-type(1) > div img {
  215.             padding-left: 32px;
  216.             padding-top: 32px;
  217.             margin-bottom: 0;
  218.         }
  219.         
  220.         ::selection,
  221.         .data-\\[state\\=open\\]\\:hover\\:bg-sidebar-accent:hover[data-state=open],
  222.         .dark\\:hover\\:bg-secondary-200:hover:is(.dark *),
  223.         .hover\\:bg-secondary-200:hover,
  224.         .hover\\:text-sidebar-accent-foreground:hover {
  225.             background-color: rgba(255, 149, 0, 0.2) !important;
  226.         }
  227.         
  228.         [class="group relative flex w-full gap-3"] > div > div:nth-of-type(1) {
  229.             background: rgba(50, 50, 50, 0.85);
  230.             border-radius: 1.5rem;
  231.             padding: .625rem 1.25rem .625rem 1.25rem !important;
  232.         }
  233.         
  234.         code[node="[object Object]"] {
  235.             background-color: rgba(203, 203, 203, 0.2) !important;
  236.             border-radius: 12px !important;
  237.             padding: .1em .5em!important;
  238.         }
  239.     }
  240.     
  241.     if widemode {
  242.         .max-w-screen-md {
  243.             max-width: 100%;
  244.         }
  245.         .max-h-\\[300px\\]:has(textarea) {
  246.             max-height: 50vh !important;
  247.         }
  248.         .max-w-screen-md:has(textarea) {
  249.             padding: 20px;
  250.         }
  251.         
  252.         /* Avatars */
  253.         .h-7 {
  254.             height: 32px;
  255.         }
  256.         .w-7 {
  257.             width: 32px;
  258.         }
  259.         
  260.         body:has(iframe[sandbox="allow-scripts allow-same-origin"]) {
  261.             .cm-content {
  262.                 flex-shrink: 1;
  263.             }
  264.             .cm-line {
  265.                 white-space: wrap;
  266.                 width: 100% !important;
  267.             }
  268.         }
  269.     }
  270. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址