☰

Cici responsive + customizations

Cici website is more suitable for wide screens.

目前为 2024-12-31 提交的版本。查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Cici responsive + customizations
  3. @version        1.0.1
  4. @description    Cici 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/cici
  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    text        fontsize    "Custom font size"  1.2rem
  13. @var    checkbox    darkmode    "Dark mode"         1
  14. @var    checkbox    widemode    "Wide mode"         1
  15. ==/UserStyle== */
  16.  
  17. /* === Credits ===
  18. Website         https://breat.fr
  19. facebook        https://www.facebook.com/breatfroff
  20. mastodon        https://mastodon.social/@breat_fr
  21. telegram        https://t.me/breatfr
  22. vk              https://vk.com/breatfroff
  23. X (twitter)     https://x.com/breatfroff
  24. === Credits === */
  25.  
  26. @-moz-document url-prefix("https://www.ciciai.com/chat/") {
  27.     /* Custom font size */
  28.     .skill-bar-button *,
  29.     [data-testid="bot_discover_recommend_list"] *,
  30.     [data-testid="carousel-item"] *,
  31.     [data-testid="guidance_groups_skill_card"] *,
  32.     [data-testid="union_message"] *,
  33.     textarea {
  34.         font-size: fontsize !important;
  35.         line-height: 1.5 !important;
  36.     }
  37.     
  38.     if darkmode {
  39.         [data-testid="chat_siderbar"] {
  40.             background: var(--s-color-bg-tertiary);
  41.             border-right: 1px solid #0057ff !important;
  42.         }
  43.  
  44.         [class*="chat-input-container"] {
  45.             box-shadow: rgba(0, 87, 255, 0.2) -2px -2px 2px 2px,
  46.                         rgba(0, 87, 255, 0.2) -2px 2px 2px 2px,
  47.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  48.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  49.         }
  50.         svg[class*="short-cut"] {
  51.             stroke: #0057ff;
  52.         }
  53.     }
  54.  
  55.     if widemode {
  56.         * {
  57.             --chat-area-max-width: 100% !important;
  58.             --center-content-max-width: 100% !important;
  59.             --self-message-box-max-width: 100% !important;
  60.             --chat-bg-color: #f3f4f6 !important;
  61.             --s-color-bg-tertiary: #f3f4f6 !important;
  62.         }
  63.         
  64.         /* Images sent by us */
  65.         [data-testid="message_content"] [class*="container-"] {
  66.             margin-left: auto;
  67.         }
  68.         [data-testid="mdbox_image"] {
  69.             border: 1px solid #0057ff !important;
  70.             border-radius: 12px;
  71.         }
  72.         
  73.         /* Our code block */
  74.         [class*="send-message-box-content"] {
  75.             max-width: 100% !important;
  76.             width: 100% !important;
  77.         }
  78.         
  79.         /* Avatar */
  80.         .semi-avatar img {
  81.             background-color: transparent !important;
  82.         }
  83.         [data-testid="chat_header_avatar_button"] {
  84.             height: 36px !important;
  85.             width: 36px !important;
  86.         }
  87.     }
  88. }