☰

Microsoft Copilot responsive + customizations

Microsoft Copilot website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           Microsoft Copilot responsive + customizations
  3. @version        1.0.3
  4. @description    Microsoft Copilot 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/microsoft-copilot
  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    chatmode            "Chat mode"                 1
  13. @var    text        fontsize            "Font size"                 1.2rem
  14. @var    checkbox    hidecopilotpro      "Hide Copilot Pro"          1
  15. @var    checkbox    hidedownloadapp     "Hide Download Application" 1
  16. @var    checkbox    hidescrollbars      "Hide scrollbars"           1
  17. @var    checkbox    widemode            "Wide mode"                 1
  18. ==/UserStyle== */
  19.  
  20. /* === Credits ===
  21. Website         https://breat.fr
  22. facebook        https://www.facebook.com/breatfroff
  23. mastodon        https://mastodon.social/@breat_fr
  24. telegram        https://t.me/breatfr
  25. vk              https://vk.com/breatfroff
  26. X (twitter)     https://x.com/breatfroff
  27. === Credits === */
  28.  
  29. @-moz-document domain("copilot.microsoft.com") {
  30. /* =============================================
  31.     Whole website
  32. ============================================= */
  33.     /* Versions */
  34.     :root {
  35.         --themeversion: 'Theme v1.0.3 by BreatFR (https://breat.fr)';
  36.         --install1: ' usercssjs.breat.fr ';
  37.         --install2: ' gitlab.com/breatfr/microsoft-copilot ';
  38.         --space: '\00a0\00a0\00a0\00a0\00a0';
  39.         --support1: ' ko-fi.com/breatfr ';
  40.         --support2: ' paypal.me/breat ';
  41.     }
  42.  
  43.     @media screen and (min-width: 900px) {
  44.         html[data-theme="dark"] {
  45.             body::before {
  46.                 background-color: rgb(16 21 36);
  47.                 content: "";
  48.                 height: calc(40px + 2rem);
  49.                 left: 0;
  50.                 pointer-events: none;
  51.                 position: fixed;
  52.                 right: 0;
  53.                 top: 0;
  54.                 z-index: 1;
  55.             }
  56.         }
  57.         html[data-theme="light"] {
  58.             body::before {
  59.                 background-image: linear-gradient(180deg, #f8f4f2 50%, #fdedde);
  60.                 content: "";
  61.                 height: calc(40px + 2rem);
  62.                 left: 0;
  63.                 pointer-events: none;
  64.                 position: fixed;
  65.                 right: 0;
  66.                 top: 0;
  67.                 z-index: 1;
  68.             }
  69.         }
  70.         body::after {
  71.             background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  72.             -webkit-background-clip: text;
  73.             -moz-background-clip: text;
  74.             background-clip: text;
  75.             color: transparent;
  76.             content: var(--themeversion) '\A''Install: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAARxSURBVDhPvZR5TJNnGMAfBIUFzLSctqWUlqPcCBlQjhpdkGvNWCY2rQfKBihImMc4VgUhoIM4mG5z7MicCROZbBBxICAUHEeG6IRF2nKUwteDclhbbkq/7gO+ZRoy+W+/5P3n+Z7n9z7fm+d94X/DALDF0PC7v7alJVlVW1sir668qaiqKFf8cufG+G+1l2eaW+PQm02WePrrUd6uYg+WlTUKs8+phfHv6QdimLqhUM/FIZb74lC496IolqV/lnp0pb+0QDhaXs7ByzZi6OnZ+qiwuPhx8lH9ANNxQUUHZMEZBlZ2gkhvASJ0OwhRJxDqyCCaMYEhCflNbRf3gK4vvygWV7xKY3o6vzuGaVC7whjqDv3YEi8zYHiFZCTWO2BSexAvEWEYJWByG2y5Qr+UbKJ9wIsVoFcHTHHNOoLMy9R7rEBE4wZy1AdEiJ+16s9w5mQHlzvax96NoG4gHN1PHG2L440P+Lso9V4gxroVrZBhpJXpMdKUVULDVet8eTg+spNmrUEdYLg9xHPqAfdQzdOkU5zmD1J5ze5UGeoCIx0hNElXYub7dfG87yTMHeN4p5KW3TTJT8nnnXHVOmU8nle1K1VVz3CYv8s5xEcj09Z+ITc0NLbDbrsatYexGh/HHjAYjK6FR+3rtCdMoX4gXvABeSXTtVOQ8rPFmugfsDExqotmp/0aw87GQ2vkOzsX9TuaaGYtYfw6zbFyNZbFYKR07TLTYkLhE5KZ5ovAwItryZthyBWYXCJZNmqdQPXMHKay7IgXIgFM+XZWLZP0LRMaF0CuUym9d48kUfCS15PkyWR8bWOGoCQY7qMTFDnRUcIcdkx3vRdRPesMkm/td4xVRLHfwdM350MqPbHBynQOJYJwwnvrqJxhp5Z5kTQ62rZhhGwuLwgJkOeG7Q3G0zengE69I7cxfq61haEffN2U9TTKOGIHMpSCDbitkXjQ1/ZFiYeH7IJfqD9e8t9c2sN2qmBQEJQM0j8YhIkq9oFT7UeOcW7v3dfZ7USa1lOwOcQGu9/RYqk00KdGgJ03XvoqD9MKras+LY24cSzxVh9jp3re3hi5HxrcZgCD0ep3NPczQg2X+03/W+RxbDPRCg2ktX60sR8T+fQ1wcs0JSVRqnmcnvbDB/VP3g1aWLKEwTEGSXU/k9/bfKU0obeo1HU1byrjKrljD0u0bAVSFDuOR0EMpC670HtN8jIPCwvffuzrMjdnDlI9dq2wWyOeJ8KgOIym7uZEox2pJya6CvLauj6/0vQ0LEC5QoUB7KEY7ePu/6uv8JYtrvkXyfflDlJunFhnY6yYY1EV8pTjz1+wgyb0WBfLAOLpbSCTEm00w57kGS02Nqg5CKeD3WaHMrKu4YqNIB9nn1acOalEzmc0SE6e4Uj5OV+pTiTL5yNY03oXogwlvCFFbUylugCqQpMQPSPL/6RVkXDWAS/fyOpLLT543GfMPYiAh0CSks6S5+UVT/Kz702d/ah16txpgTKHX4PkXMyWhkXswtMwAP4GEl0BMY+jC7gAAAAASUVORK5CYII=") var(--install1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAvRJREFUOE+dU0lrU1EUfqhbK4rixiHvvptW+gu0TZqkrQWHhVJpKyoI4lRx3ghdOCwFrS24cwCbmKYtVelCqIorf0NBrGkSWqJkWmgb7Hvv+J37brSxg9UPDuGcb8h5Jy/Gn5hsEv3TodrNul0VZgJyC/t0uxjptvpNX1r8xUxENOvRqpAK+Vuz8JUCOzbqUTVSYauTDtZTOmL16dGqkAnLfvalIlaHHlUDgcP2vl2UDlufKRRap8crgnXwJT2fHNLj3yi0ig0gSl9b/FRoraXpsGjU1IpIhUSA9ezLRGRxEjma8pAJySPf2uqYpDl8Yuv7mloR0PWynn3KH5btmvIAYrASnMcGMHwiw1ij6SWB514L3WQO+gXBcU0bxkdD1qSDspBt9lM6JJmkXHMtJRvlbi1ZEskGa08eOtazj/2ZoMxPGHXrlaD8QBy2r0maPSlo9pRXzlmLih1iKhmQH3D7RcXzYqeYYl3Fw37OKfdah1Swk/DFKG6Rc8n06opJ7lWTqBvheMwS194FhZ7nzLOO9RWvyhn2RQ33ubnVjpozNIpvu2eSfQ510SvnsknZ/Ralm3Ae3LBS3GcPIAB8Rat88HPO/IA5bSB01I0hJApiEHVHiyDmbUpdglLB6mDuS0eF4n+Fsg9+znGQh2DfW0oIoiFsjIGqG6jz3sblMya/+FXB/GPxXG0MndJrL+dwnrqxHdvZ5SREnl5JcuIQPEWx6YJnVufgtwWh6tdHr0LB27gv69mn/AmRw7KdKpjhPtthYviGxiTRCLZ/CEM3zgHjwnOoM6DnOfOsYz374B+fQ46OrIYdN3sgcGnMIvsuNoG5fFqfg9/Xyhk4FDzrWI8z9OiI5fFjwAw6Q2KCXktybyMEd+THnwroM6DnOfNKFxMBbf07cn2yxhk2n9BLi+imoGK7oGSDVJ90C4W5MyIeu4/0v+xfYb/wnXCjokD4R6URTNexJXp71DyuJf8P9/026faJ8e/H5LyDT/fddktTy8AwfgLHRHNkJDm7EgAAAABJRU5ErkJggg==") var(--install2) var(--space) ' Support me: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAA2FJREFUSEu1lktIVGEYhqfIXW5ctUkDF250q4jLILLUvBSjzjh285pahoxIK3Fop0iRiWbiNRMUzcvIpI1dNkVGYBckIzTRAkVHCbOyt/f7/Y81alOgvvBw5nzf+b/3/Nc5Jq0I4iKPdpg7xEy2VCSZJtglfpBRkkm85CQoKSlBT0/PjtDf34+BgQG0trYiOzsbAQEBxkvcI/uJ0gMCt9uN3dLs7CzMZrNhPkD2ENOgBHp7e/Vj29P4+DhCQ0MRGBiIkJAQZGRkYH5+XuVSUlIM8ywxlkUAp9Opkl76+BlwjwDPXgPLKzpIjfDe+ZAuEzrwWzLEuvgH8kp+ywssLi7C4/EYw/6S/MW43QXEFwFH84BjF4CCq8CT50DZdSDmHGPpwImzwN0u3WBNg4ODhnGhFKdKCex2u8pbrVbJeSSx2XhqhqYXgcRLQPJljhGviTmMZfB6HkjNBixZgPkMYynAu/e6oZexXYprTYSFhal8ZWWl5FYkuNn4xSgQm0nDAsIep+YSGqcyZqG5hT220tR6Gog7AQwN6YZexsVSXOtpUFCQyjc0NEjuuwQfkw09ngZO0SSZvbJsNOMQW9OANCuvqUASjd++0Q29jAukOHWIeKKiolS+rKxMcl8l4Sbo6+tTiXWVcy6Pn6QB51HM0rRZmgWwaeJjAEcpsLqqGwEul8swvkVsZEzuOzo6VD4iIkJyn4jpviRk43tpaQmwF7M4e2QYGaTzBaSn+ZyCuTndYE3Dw8OGscLPzw8Oh0PlxFzHm8jaydXd3a2SXlrg/isqBBLi1swM46R4IJfTMMMp2aDl5WXU1NSgoqICTU1NmJqaUnGZAn9/fzH9QoLFuEuMOzs71QObJJtfzONjdU9pmsN5n95supXGxsaQn59v9PQbiSVKbQTt7e360S3EjY8rJcCRw0Aeh9eH6eTkJKKjoxEZGYng4GDDUBghUWRdt4k60H2KQ4iaag4v97gPyVqRemSByAnVSJLIXuKlawSNjY266fYk8yv1SLoU96UEog7w7WqV2yo8PFxMf5KDUvxfUn+NNpsNzc3NaGtrU9eWlpZ15F5OHaG+vh51dXWora1FdXU1qqqqUF5eDjkkpA65IUX/RweIfPrIUl/1gXxN/IkcfYKsVmGO3CT7iA+ZTL8ANy582NV4RdEAAAAASUVORK5CYII=") var(--support1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAslJREFUOE+Nk0tIVFEYx6WNEC1attA7znXmnHNvpjH3js7GRQ+dKDKTMgx6UOnMvaNZaRAoGD0WRTQPH6Nii6CgRa1yUUGEjo+0mTSkB7UIF0G0aFlUxNd37jmOjo7QH/6cgXu+3/leU7BSxLSvaVXnvhDTWmNqRhap2TqmVbZf1PXDm2RIrjyetkJiWJ9Z5Vmgpr2+/ZFfeOcd8YUaZeiyvKalUtP6y/yt+YNXGLNFnwfiC++U4UII2a1Vta8KiKxjG/RAB2D5T2S4ENZt8w85EMMCYoTXmKJ5NtQXfiPDhZCayEL8EbwcghLWAC5av8Yl9CCoWiOUVoU+GGnYKBEO5KmOdXII74t3+ylQvPvBReryurhoF3iabgAdmX8mET0bsJxPmpwMh3jKj0vIgbxWlCB4O+4BG54DB6H77S1Y/4+lyfBTLTu6DqQelOIacFdjb/qmgcYnBYT5wgGxH6LzvCduvRFcqyHeOlCKasClHwJy5THQgRmgsZSAYD+O6YELAsCNUylx73NeVJRaPLkxWN0L7h2tQK6OAku+QsAEkFjqj4AY1vXl8eJkfCFQgx2g1neDWtcFakMPlJ6MgrfrIdB+fJ07Og7a0ByQ6PiChNiPsplUNAMNdgMdSgMbygAb5Kf47aQfn3AArO8lbL3zFlgi1eBAqGG/zm7rttNAj9wCOjjr1Ltk1jcDrH8WtGTGCdaSaSC3xy45AN1oUbCcr8zfJiBlCGkZzoGwxBS+nvqGk1ikiekMwgZIbNLvALiYYTdhJj+zkyk/A7TzQbbz/GUSTaVd0RebPfGPhTIsV7hk90VD0TgVx5dHxQ4gRB9Z4Fn0y+v5heP9Lv7aaLMNWHUn0JvPgSYmlyGxVLu8nl/MZxnMiNTgWcsqmmvJid4I6+WbiFPg5fAxxsf3yOv/J3r3fVAfnncAvKG4TL898YlS+TmPCgr+AaBy8VrppmCMAAAAAElFTkSuQmCC") var(--support2);
  77.             display: inline-block;
  78.             font-family: CascadiaCode, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  79.             font-size: 1.2rem;
  80.             left: 0;
  81.             pointer-events: none;
  82.             position: absolute;
  83.             text-align: center;
  84.             top: .5rem;
  85.             width: 100%;
  86.             white-space: pre-line;
  87.             z-index: 2;
  88.         }
  89.     }
  90.     
  91.     /* Font size */
  92.     .text-3xs,
  93.     .text-base,
  94.     .text-sm,
  95.     p,
  96.     span {
  97.         font-size: fontsize !important;
  98.         line-height: 1.5 !important;
  99.     }
  100.     /* Fix background for source number with bigger font size */
  101.     .dark\\:bg-slate-750:is([data-theme=dark] *),
  102.     .light\\:bg-slate-750:is([data-theme=light] *) {
  103.         height: auto;
  104.         padding: 0 .5em;
  105.     }
  106.        
  107.     if hidecopilotpro {
  108.         [data-testid="settings-menu"] > div:has(> div:nth-of-type(6)) > div:nth-of-type(1) {
  109.             display: none;
  110.         }
  111.     }
  112.     
  113.     if hidedownloadapp {
  114.         [data-testid="settings-menu"] > div > button[data-testid="promotion-button"],
  115.         [data-testid="settings-menu"] > div:has(> div:nth-of-type(6)) > div:nth-of-type(4) {
  116.             display: none;
  117.         }
  118.     }
  119.     
  120.     if hidescrollbars {
  121.         *,
  122.         :root ::-webkit-scrollbar {
  123.             scrollbar-width: none !important;
  124.             -ms-overflow-style: none !important;
  125.             -moz-overflow-style: none !important;
  126.             -webkit-overflow-style: none !important;
  127.         }
  128.         ::-webkit-scrollbar {
  129.             display: none;
  130.             width: 0;
  131.         }
  132.     }
  133.  
  134.     if widemode {
  135.         [data-testid="composer"] > div:nth-of-type(2) > div,
  136.         [data-testid="composer"] > div:nth-of-type(2) > div > div:nth-of-type(2) > div > div {
  137.             max-width: 100%;
  138.             width: 100%
  139.         }
  140.         [data-testid="settings-menu"] > div > div:last-child {
  141.             flex-wrap: nowrap;
  142.             white-space: nowrap;
  143.         }
  144.         [data-testid="settings-menu"] > div > div:last-child > a:first-child {
  145.             order: 3;
  146.         }
  147.         [data-testid="settings-menu"] {
  148.             min-width: max-content;
  149.         }
  150.     }
  151. }
  152.  
  153. @-moz-document url("https://copilot.microsoft.com/") {
  154. /* ===================================================
  155.     Discover page
  156. =================================================== */
  157.     if widemode {
  158.         [data-testid="discover-page"] > div {
  159.             max-width: 100%;
  160.             width: 100%
  161.         }
  162.         [data-testid="discover-page"] > div > section > div {
  163.             display: flex;
  164.             flex-wrap: wrap;
  165.             gap: 2em;
  166.             justify-content: center;
  167.         }
  168.         [data-testid="discover-page"] > div > section > div > button,
  169.         [data-testid="discover-page"] > div > section > div > div {
  170.             width: 30%;
  171.         }
  172.         [data-testid="discover-page"] > div > section > div > button > div,
  173.         [data-testid="discover-page"] > div > section > div > div > div {
  174.             flex-direction: column;
  175.         }
  176.         [data-testid="discover-page"] > div > section > div > button > div > div,
  177.         [data-testid="discover-page"] > div > section > div > div > div > div {
  178.             font-size: 1.5rem;
  179.             font-variation-settings: "opsz" 40, "wght" 440;
  180.             justify-content: center;
  181.             line-height: 1.9375rem;
  182.             letter-spacing: -.01em;
  183.             padding-inline-end: 1rem;
  184.             padding-bottom: 1.25rem;
  185.         }
  186.         [data-testid="discover-page"] > div > section > div > button > div > div > h2,
  187.         [data-testid="discover-page"] > div > section > div > div > div > div > h2 {
  188.             text-align: center;
  189.         }
  190.         [data-testid="discover-page"] > div > section > div > button > div > img,
  191.         [data-testid="discover-page"] > div > section > div > div > div > img {
  192.             flex-shrink: 1;
  193.             object-fit: cover;
  194.             width: 100%
  195.         }
  196.     }
  197. }
  198.  
  199. @-moz-document url-prefix("https://copilot.microsoft.com/chats/") {
  200. /* ================================================================
  201.     Chats
  202. ================================================================ */
  203.     if chatmode {
  204.         [data-content="ai-message"] {
  205.             max-width: 80%;
  206.         }
  207.     }
  208.     
  209.     if widemode {
  210.         [data-content="conversation"]
  211.         [data-testid="audio-settings-dialog"] > div > div:nth-of-type(1) {
  212.             max-width: 100%;
  213.             width: 100%;
  214.         }
  215.         [data-testid="audio-settings-dialog"] > div > div:nth-of-type(2) {
  216.             flex-wrap: wrap;
  217.             justify-content: space-evenly;
  218.         }
  219.         pre {
  220.             white-space: pre-wrap;
  221.         }
  222.     }
  223. }