Mistral responsive + customizations

Mistral website is more suitable for wide screens.

当前为 2025-02-18 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name Mistral responsive + customizations
  3. @version 1.0.17
  4. @description Mistral 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 chatmode "Chat mode" 1
  14. @var checkbox avatar "Custom avatar for us" 0
  15. @var text avatarurl "Custom avatar URL" "URL between quotes"
  16. @var checkbox cmmistralavatar "Custom Mistral avatar" 0
  17. @var text cmmistralavatarurl "Custom Mistral avatar URL" "URL between quotes"
  18. @var text cmmistralavatarsize "Custom Mistral avatar size" calc(100vh - 46px - 155px - 1rem)
  19. @var text cmmistralavatarcorner "Custom Mistral avatar corner" 50%
  20. @var text fontsize "Custom font size" 1.2rem
  21. @var checkbox hidepro "Hide pro" 1
  22. @var checkbox widemode "Wide mode" 1
  23. ==/UserStyle== */
  24.  
  25. /* === Credits ===
  26. Website https://breat.fr
  27. facebook https://www.facebook.com/breatfroff
  28. mastodon https://mastodon.social/@breat_fr
  29. telegram https://t.me/breatfr
  30. vk https://vk.com/breatfroff
  31. X (twitter) https://x.com/breatfroff
  32. === Credits === */
  33.  
  34. @-moz-document domain("chat.mistral.ai") {
  35. /* Mistral Chat */
  36. /* Versions */
  37. :root {
  38. --themeversion: 'Theme v1.0.17 by BreatFR (https://breat.fr)';
  39. --install1: ' usercssjs.breat.fr \A';
  40. --install2: ' gitlab.com/breatfr/mistral \A \A';
  41. --support1: ' ko-fi.com/breatfr \A';
  42. --support2: ' paypal.me/breat';
  43. }
  44.  
  45. @media (min-width: 900px) {
  46. main main::after {
  47. background: linear-gradient(88.55deg, rgb(253, 73, 2) 22.43%, rgb(254, 206, 0) 92.28%);
  48. background-clip: text;
  49. -webkit-background-clip: text;
  50. color: transparent;
  51. content: var(--themeversion);
  52. display: block;
  53. font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  54. font-size: 1.2rem;
  55. left: 50%;
  56. line-height: 1.5;
  57. max-width: max-content;
  58. pointer-events: none;
  59. position: absolute;
  60. text-align: center;
  61. top: 0;
  62. transform: translate(-50%, 50%);
  63. width: 100%;
  64. white-space: wrap;
  65. }
  66. }
  67. [data-state="expanded"] [data-sidebar="sidebar"]::after,
  68. [data-mobile="true"][data-sidebar="sidebar"]::after {
  69. background: linear-gradient(88.55deg, rgb(253, 73, 2) 22.43%, rgb(254, 206, 0) 92.28%);
  70. background-clip: text;
  71. -webkit-background-clip: text;
  72. bottom: 1em;
  73. color: transparent;
  74. 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);
  75. display: block;
  76. font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  77. font-size: 1.2rem;
  78. left: 0;
  79. line-height: 1.5;
  80. max-width: 256px;
  81. pointer-events: none;
  82. position: fixed;
  83. text-align: center;
  84. width: 100%;
  85. white-space: pre-line;
  86. }
  87. body {
  88. max-height: 100vh;
  89. overflow: hidden;
  90. }
  91. /* Textarea focused */
  92. body:has(textarea:focus) {
  93. [class="flex w-full flex-col p-4"] {
  94. border-radius: calc(var(--radius) + 4px);
  95. box-shadow: rgba(255, 149, 0, 0.4) -2px -2px 2px 2px,
  96. rgba(255, 149, 0, 0.4) -2px 2px 2px 2px,
  97. rgba(255, 69, 0, 0.4) 2px -2px 2px 2px,
  98. rgba(255, 69, 0, 0.4) 2px 2px 2px 2px;
  99. }
  100. }
  101. /* Custom font size */
  102. .prose,
  103. code,
  104. textarea,
  105. .max-w-screen-md:has(textarea) button {
  106. font-size: fontsize !important;
  107. line-height: 1.5 !important;
  108. }
  109. textarea.py-2 {
  110. min-height: max-content !important;
  111. }
  112. if avatar {
  113. [data-sidebar="header"] button:nth-of-type(1) > div > div:nth-of-type(1) {
  114. background: transparent;
  115. color: transparent;
  116. }
  117. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) {
  118. position: relative;
  119. }
  120. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) > div {
  121. margin-right: calc(32px + .5em);
  122. }
  123. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) > div::before {
  124. position: absolute;
  125. right: 0;
  126. }
  127. [data-sidebar="header"] button:nth-of-type(1) > div > div:nth-of-type(1):before,
  128. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) > div::before {
  129. background: url(avatarurl) no-repeat center center / cover;
  130. border-radius: 50%;
  131. content: "";
  132. display: inline-block;
  133. height: 32px;
  134. width: 32px;
  135. }
  136. }
  137. if cmmistralavatar {
  138. [class="absolute flex w-full max-w-screen-md flex-col px-2"] {
  139. bottom: 0;
  140. max-width: 100%;
  141. top: auto !important;
  142. }
  143. [class="mb-40 flex flex-col items-stretch"] {
  144. height: auto;
  145. margin: 0;
  146. max-height: calc(100vh - 64px - 151px) !important;
  147. overflow: hidden;
  148. position: absolute;
  149. top: 64px;
  150. }
  151. [class="mb-40 flex flex-col items-stretch"] svg {
  152. aspect-ratio: 1 / 1;
  153. background: url(cmmistralavatarurl) no-repeat center center / cover;
  154. border-radius: cmmistralavatarcorner;
  155. height: 0;
  156. margin: 0 auto;
  157. padding-left: cmmistralavatarsize;
  158. padding-top: cmmistralavatarsize;
  159. width: 0;
  160. }
  161. [class="group flex w-full gap-3"] > span > svg {
  162. aspect-ratio: 1 / 1;
  163. background: url(cmmistralavatarurl) no-repeat center center / cover;
  164. border-radius: 50%;
  165. height: 0;
  166. padding-left: 32px;
  167. padding-top: 32px;
  168. width: 0;
  169. }
  170. }
  171. if chatmode {
  172. [class="flex h-fit w-full flex-col"] > div {
  173. max-width: 80%;
  174. }
  175. code[style*="white-space: pre"],
  176. code[style*="white-space:pre"] {
  177. white-space: break-spaces !important;
  178. }
  179. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) {
  180. align-self: flex-end !important;
  181. justify-content: flex-end !important;
  182. }
  183. [class="flex h-fit w-full flex-col"] > div:nth-child(odd) > div > div:nth-of-type(1) > div > div > div {
  184. margin-left: auto;
  185. }
  186. }
  187. if darkmode {
  188. .dark,
  189. .light {
  190. --background-primary: 240 7% 18%;
  191. --background-secondary: 240 5.9% 10%;
  192. --sidebar-background: 0 0% 5%;
  193. }
  194. /* Help button */
  195. #help-button {
  196. color: rgb(243 244 246);
  197. left: .75rem;
  198. right: auto;
  199. }
  200. .intercom-app > div:nth-of-type(1) {
  201. left: 20px;
  202. right: auto;
  203. }
  204. /* Mistral logo/avatar */
  205. [class="group flex w-full gap-3"] > span > svg {
  206. height: 32px;
  207. margin-bottom: 0;
  208. width: 32px;
  209. }
  210. ::selection,
  211. .data-\\[state\\=open\\]\\:hover\\:bg-sidebar-accent:hover[data-state=open],
  212. .dark\\:hover\\:bg-secondary-200:hover:is(.dark *),
  213. .hover\\:bg-secondary-200:hover,
  214. .hover\\:text-sidebar-accent-foreground:hover {
  215. background-color: rgba(255, 149, 0, 0.2) !important;
  216. }
  217. [class="group relative flex w-full gap-3"] > div > div:nth-of-type(1) {
  218. background: rgba(50, 50, 50, 0.85);
  219. border-radius: 1.5rem;
  220. padding: .625rem 1.25rem .625rem 1.25rem !important;
  221. }
  222. code[node="[object Object]"] {
  223. background-color: rgba(203, 203, 203, 0.2) !important;
  224. border-radius: 12px !important;
  225. padding: .1em .5em!important;
  226. }
  227. /* Scroll down icon */
  228. svg.lucide-arrow-down path {
  229. stroke: rgb(255, 69, 0);
  230. }
  231. /* Links */
  232. .prose a {
  233. color: hsl(25, 88%, 51%);
  234. }
  235. }
  236. if hidepro {
  237. [data-sidebar="menu"] > li:nth-of-type(3) {
  238. display: none;
  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: 1em 1.75em;
  250. }
  251. /* Avatars */
  252. .h-7 {
  253. height: 32px;
  254. }
  255. .w-7 {
  256. width: 32px;
  257. }
  258. body:has(iframe[sandbox="allow-scripts allow-same-origin"]) {
  259. .cm-content {
  260. flex-shrink: 1;
  261. }
  262. .cm-line {
  263. white-space: wrap;
  264. width: 100% !important;
  265. }
  266. }
  267. /* Generated images */
  268. [class="group flex w-full gap-3"] > div:nth-of-type(2) p:has(img) {
  269. margin-left: auto;
  270. margin-right: auto;
  271. }
  272. /* Textarea box */
  273. [class="relative flex w-full flex-col justify-start"] > div {
  274. padding-bottom: 0 !important;
  275. }
  276. /* Scroll down icon */
  277. button:has(svg.lucide-arrow-down) {
  278. height: 40px;
  279. width: 40px;
  280. }
  281. svg.lucide-arrow-down path {
  282. stroke: rgb(255, 69, 0);
  283. }
  284. /* Small space between date and edit button */
  285. [aria-label="Edit question"] {
  286. margin-left: 1em !important;
  287. }
  288. /* Search box */
  289. div[role="dialog"]:has(label) {
  290. max-height: 80%;
  291. max-width: 80%;
  292. }
  293. div[role="dialog"]:has(label) input:hover {
  294. box-shadow: none;
  295. }
  296. }
  297. }
  298.  
  299. @-moz-document domain("console.mistral.ai") {
  300. /* Mistral Console */
  301. button[class*="flex w-full items-center gap-3 rounded px-3 py-2"] > div:nth-of-type(1),
  302. .user-initials {
  303. background: transparent !important;
  304. color: transparent;
  305. }
  306. button[class*="flex w-full items-center gap-3 rounded px-3 py-2"] > div:nth-of-type(1)::before,
  307. .user-initials::before {
  308. background: url(avatarurl) no-repeat center center / cover;
  309. border-radius: 50%;
  310. content: "";
  311. display: inline-block;
  312. height: 32px;
  313. width: 32px;
  314. }
  315. }

QingJ © 2025

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