☰

Cici responsive + customizations

Cici website is more suitable for wide screens.

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

  1. /* ==UserStyle==
  2. @name           Cici responsive + customizations
  3. @version        1.0.3
  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. /* ========================================================
  28.     Website theme 
  29. ======================================================== */
  30.     /* Versions */
  31.     :root {
  32.         --themeversion: 'Theme v1.0.3 · ';
  33.         --scriptversion: 'Script v1.0.0 \A';
  34.         --author: 'by BreatFR (https://breat.fr) \A \A';
  35.         --install1: ' usercssjs.breat.fr \A';
  36.         --install2: ' gitlab.com/breatfr/cici \A \A';
  37.         --support1: ' ko-fi.com/breatfr \A';
  38.         --support2: ' paypal.me/breat';
  39.  
  40.         --chat-area-max-width: 100%;
  41.         --chat-bg-color: #212121;
  42.         --color-neutral-100: #cbcbcb;
  43.         --s-color-bg-primary: #2f2f2f;
  44.         --s-color-bg-secondary: #2f2f2f;
  45.         --s-color-bg-tertiary: #171717;
  46.         --s-color-bg-trans: rgba(255, 255, 255, 0.2);
  47.         --s-color-brand-primary-default: #7e94fe;
  48.         --s-color-text-primary: #cbcbcb;
  49.         --s-color-text-secondary: #cbcbcb;
  50.         --s-color-text-tertiary: #cbcbcb;
  51.         --s-color-text-quaternary: #cbcbcb;
  52.     }
  53.  
  54.     [data-testid="bookmark_entry"]::after {
  55.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  56.         background-clip: text;
  57.         -webkit-background-clip: text;
  58.         bottom: 1em;
  59.         color: transparent;
  60.         content: var(--themeversion) var(--scriptversion) var(--author) '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);
  61.         display: block;
  62.         font-family: Montserrat;
  63.         font-size: 1rem;
  64.         left: 0;
  65.         line-height: 1.5;
  66.         max-width: 280px;
  67.         position: fixed;
  68.         text-align: center;
  69.         width: 100%;
  70.         white-space: pre-line;
  71.     }
  72.  
  73.     /* Custom font size */
  74.     .skill-bar-button *,
  75.     [data-testid="bot_discover_recommend_list"] *,
  76.     [data-testid="carousel-item"] *,
  77.     [data-testid="guidance_groups_skill_card"] *,
  78.     [data-testid="union_message"] *,
  79.     textarea {
  80.         font-size: fontsize !important;
  81.         line-height: 1.5 !important;
  82.     }
  83.     
  84.     if darkmode {
  85.         [data-testid="chat_siderbar"] {
  86.             border-right: 1px solid #7e94fe !important;
  87.         }
  88.         [class*="send-message-box-content-"],
  89.         [class*="send-message-box-content-coco-"] {
  90.             background: rgba(50, 50, 50, 0.85);
  91.             border-radius: 1.5rem;
  92.         }
  93.         body {
  94.             color: #cbcbcb;
  95.         }
  96.  
  97.         [class*="chat-input-container"] {
  98.             box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  99.                         rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  100.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  101.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  102.         }
  103.         [data-testid="create_conversation_button"] svg path,
  104.         svg[class*="short-cut-"] path,
  105.         svg[class*="short-cut-"] rect {
  106.             stroke: #7e94fe;
  107.         }
  108.         [data-testid="scroll_view"] svg path {
  109.             stroke: #cbcbcb;
  110.         }
  111.         .semi-space svg path {
  112.             fill: #cbcbcb;
  113.         }
  114.         
  115.         [class*="thread-creation-"] {
  116.             color: var(--s-color-brand-primary-default, #7e94fe);
  117.         }
  118.         
  119.         [class*="chat-input-"] {
  120.             background: #2f2f2f;
  121.         }
  122.         [data-testid="chat_input_send_button"]:disabled {
  123.             background-color: grey;
  124.         }
  125.         a[class*="section-item-"]:not(.active-):hover {
  126.             background: var(--s-color-bg-trans, rgba(255, 255, 255, 0.2)) !important;
  127.         }
  128.         
  129.         [class*="to-bottom-button-"] {
  130.             background: var(--s-color-bg-tertiary);
  131.         }
  132.     }
  133.  
  134.     if widemode {
  135.         /* Wide chat */
  136.         [style*="--right-side-width: 0px; --center-content-max-width:"] {
  137.             --center-content-max-width: 100% !important;
  138.         }
  139.         
  140.         /* Cici's face on home page */
  141.         @media (max-width: 600px) {
  142.             [class*="guidance-view-layout-"] {
  143.                 display: flex;
  144.                 flex-direction: column;
  145.                 height: calc(100vh - 216px);
  146.                 justify-content: center;
  147.                 padding: 10px 0;
  148.             }
  149.         }
  150.         [data-testid="guidance_panel"]::before {
  151.             aspect-ratio: 1 / 1;
  152.             background: url("https://gitlab.com/breatfr/cici/-/raw/main/docs/cici-icon.png") no-repeat center center / cover;
  153.             content: "";
  154.             display: inline-block;
  155.             height: 100%;
  156.             margin: auto;
  157.             max-height: 256px;
  158.             min-height: 100px;
  159.             width: auto;
  160.         }
  161.         
  162.         /* Images sent by us */
  163.         [data-testid="message_content"] [class*="container-"] {
  164.             margin-left: auto;
  165.         }
  166.         [data-testid="mdbox_image"] {
  167.             border: 1px solid #7e94fe !important;
  168.             border-radius: 12px;
  169.         }
  170.         
  171.         /* Chat "bubbles" */
  172.         [class*="message-box__reverse-"] {
  173.             margin-left: auto;
  174.         }
  175.         [class*="send-message-"] {
  176.             display: flex;
  177.             justify-content: flex-end;
  178.             margin-left: auto;
  179.             max-width: 100%;
  180.         }
  181.         [data-testid="send_message"] [data-testid="message_content"] {
  182.             padding-bottom: 0.625rem;
  183.             padding-left: 1.25rem;
  184.             padding-right: 1.25rem;
  185.             padding-top: 0.625rem;
  186.         }
  187.         [data-testid="send_message"],
  188.         [data-testid="receive_message"] {
  189.             max-width: 80%;
  190.             min-width: 80%;
  191.             width: 100%;
  192.         }
  193.         
  194.         /* Avatar */
  195.         .semi-avatar img {
  196.             background-color: transparent !important;
  197.         }
  198.         [data-testid="chat_header_avatar_button"] {
  199.             height: 36px !important;
  200.             width: 36px !important;
  201.         }
  202.     }
  203. }
  204.  
  205. @-moz-document url-prefix("http://"), url-prefix("https://") {
  206. /* ========================================================
  207.     Browser plugin
  208. ======================================================== */
  209.     /* Translated by Cici */
  210.     :root {
  211.         --s-color-text-secondary: #cbcbcb;
  212.         --select-assistant-bg-color: #212121;
  213.     }
  214.     
  215.     .__Cici_translate_translated_inject_node__:before {
  216.         background: url("https://gitlab.com/breatfr/cici/-/raw/main/docs/cici-icon.png") no-repeat center center / cover;
  217.         content: "";
  218.         display: inline-block;
  219.         height: 1.2rem;
  220.         margin: auto;
  221.         margin-right: 5px;
  222.         vertical-align: middle;
  223.         width: 1.2rem;
  224.     }
  225.     .__Cici_translate_translated_inject_node__ {
  226.         box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  227.                     rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  228.                     rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  229.                     rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  230.         border-radius: 12px;
  231.         padding: 5px 10px;
  232.     }
  233. }