☰

Cici responsive + customizations

Cici website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           Cici responsive + customizations
  3. @version        1.0.12
  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    select      customciciface      "Custom Cici face"                      {
  13.     "Large Cici face": "cmlgciciface",
  14.     "Small Cici face": "cmsmciciface",
  15.     "Hidden": "nocmciciface"
  16. }
  17. @var    text        cmcicifaceurl       "Custom Cici face URL"                  '"https://gitlab.com/breatfr/cici/-/raw/main/docs/cici-icon.png"'
  18. @var    text        cmciciavatarcorner  "Custom Cici avatar corner"             22%
  19. @var    text        fontsize            "Custom font size"                      1.2rem
  20. @var    checkbox    chatmode            "Chat mode (Require Our avatar URL)"    0
  21. @var    text        ouravatarurl        "Our avatar URL (Require Chat mode)"    '"https://pbs.twimg.com/profile_images/1676568728585007105/9DebaQOc_400x400.jpg"'
  22. @var    checkbox    darkmode            "Dark mode"                             1
  23. @var    checkbox    hidedownload        "Hide download app"                     0
  24. @var    checkbox    widemode            "Wide mode"                             1
  25. ==/UserStyle== */
  26.  
  27. /* === Credits ===
  28. Website         https://breat.fr
  29. facebook        https://www.facebook.com/breatfroff
  30. mastodon        https://mastodon.social/@breat_fr
  31. telegram        https://t.me/breatfr
  32. vk              https://vk.com/breatfroff
  33. X (twitter)     https://x.com/breatfroff
  34. === Credits === */
  35.  
  36. @-moz-document url-prefix("https://www.cici.com/chat/") {
  37. /* ========================================================
  38.     Chat
  39. ======================================================== */
  40.     /* Versions */
  41.     :root {
  42.         --themeversion: 'Theme v1.0.12 · ';
  43.         --scriptversion: 'Script v1.0.2 ';
  44.         --author: 'by BreatFR (https://breat.fr)';
  45.         --install1: ' usercssjs.breat.fr \A';
  46.         --install2: ' gitlab.com/breatfr/cici \A \A';
  47.         --support1: ' ko-fi.com/breatfr \A';
  48.         --support2: ' paypal.me/breat';
  49.  
  50.         --chat-area-max-width: 100%;
  51.         --self-message-box-max-width: 100%;
  52.         --chat-bg-color: #212121;
  53.         --color-neutral-100: #cbcbcb;
  54.         --dot-flashing-from: #cbcbcb;
  55.         --dot-flashing-to: rgba(203, 203, 203, 0.8);
  56.         --s-color-bg-primary: #2f2f2f;
  57.         --s-color-bg-secondary: #2f2f2f;
  58.         --s-color-bg-tertiary: #171717;
  59.         --s-color-bg-quaternary: #2f2f2f;
  60.         --s-color-bg-trans: #2f2f2f;
  61.         --s-color-bg-trans-primary: rgba(126, 148, 254, 0.2);
  62.         --s-color-brand-primary-default: #7e94fe;
  63.         --s-color-text-primary: #cbcbcb;
  64.         --s-color-text-secondary: #cbcbcb;
  65.         --s-color-text-tertiary: #cbcbcb;
  66.         --s-color-text-quaternary: #cbcbcb;
  67.     }
  68.     
  69.     @media (min-width: 900px) {
  70.         [data-testid="chat_siderbar"]::before {
  71.             background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  72.             background-clip: text;
  73.             -webkit-background-clip: text;
  74.             color: transparent;
  75.             content: var(--themeversion) var(--scriptversion) var(--author);
  76.             display: block;
  77.             font-family: Montserrat;
  78.             font-size: 1.2rem;
  79.             left: 50%;
  80.             line-height: 1.5;
  81.             max-width: max-content;
  82.             pointer-events: none;
  83.             position: fixed;
  84.             text-align: center;
  85.             top: .75em;
  86.             transform: translateX(-25%);
  87.             width: 100%;
  88.             white-space: wrap;
  89.         }
  90.     }
  91.  
  92.     [class*="leftVisible-"] [data-testid="bookmark_entry"]::after {
  93.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  94.         background-clip: text;
  95.         -webkit-background-clip: text;
  96.         bottom: 1em;
  97.         color: transparent;
  98.         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);
  99.         display: block;
  100.         font-family: Montserrat;
  101.         font-size: 1rem;
  102.         left: 0;
  103.         line-height: 1.5;
  104.         max-width: 280px;
  105.         pointer-events: none;
  106.         position: fixed;
  107.         text-align: center;
  108.         width: 100%;
  109.         white-space: pre-line;
  110.     }
  111.     
  112.     if (customciciface=="cmlgciciface") {
  113.         [data-testid="guidance_panel"]::before {
  114.             aspect-ratio: 1 / 1;
  115.             background: url(cmcicifaceurl) no-repeat center center / cover;
  116.             border-radius: cmciciavatarcorner;
  117.             content: "";
  118.             display: inline-block;
  119.             height: 100%;
  120.             margin: auto;
  121.             max-height: 256px;
  122.             min-height: 100px;
  123.             width: auto;
  124.         }
  125.         [data-testid="chat_siderbar"] img[style="width: 36px; height: 36px;"] {
  126.             aspect-ratio: 1 / 1;
  127.             background: url(cmcicifaceurl) no-repeat center center / cover;
  128.             border-radius: cmciciavatarcorner;
  129.             height: 0;
  130.             padding-left: 36px;
  131.             padding-top: 36px;
  132.             width: 0;
  133.         }
  134.     }
  135.     
  136.     if (customciciface=="cmsmciciface") {
  137.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div::before {
  138.             aspect-ratio: 1 / 1;
  139.             align-self: center;
  140.             background: url(cmcicifaceurl) no-repeat center center / cover;
  141.             border-radius: cmciciavatarcorner;
  142.             content: "";
  143.             display: inline-block;
  144.             height: 100%;
  145.             margin: auto;
  146.             margin-right: 0.5em;
  147.             max-height: 256px;
  148.             min-height: 100px;            
  149.             width: auto;
  150.         }
  151.         [data-testid="chat_siderbar"] img[style="width: 36px; height: 36px;"] {
  152.             aspect-ratio: 1 / 1;
  153.             background: url(cmcicifaceurl) no-repeat center center / cover;
  154.             border-radius: cmciciavatarcorner;
  155.             height: 0;
  156.             padding-left: 36px;
  157.             padding-top: 36px;
  158.             width: 0;
  159.         }
  160.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div {
  161.             align-items: center;
  162.         }
  163.     }
  164.     if (customciciface=="nocmciciface") {
  165.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div::before {
  166.             background: none;
  167.             display: none;
  168.         }
  169.     }
  170.  
  171.     /* Custom font size */
  172.     .skill-bar-button *,
  173.     [class*="type-and-tag-filter-wrapper-"] *,
  174.     [data-testid="bot_discover_recommend_list"] *,
  175.     [data-testid="carousel-item"] *,
  176.     [data-testid="chat_input_input"] *,
  177.     [data-testid="guidance_groups_skill_card"] *,
  178.     [data-testid="union_message"] *,
  179.     input,
  180.     textarea,
  181.     ::placeholder {
  182.         font-size: fontsize !important;
  183.         line-height: 1.5 !important;
  184.         text-overflow: initial !important;
  185.     }
  186.         
  187.     if chatmode && ouravatarurl {
  188.         [data-testid="send_message"] > div:nth-of-type(1)::before {
  189.             align-self: center;
  190.             aspect-ratio: 1 / 1;
  191.             background: url(ouravatarurl) no-repeat center center / cover;
  192.             border-radius: 50%;
  193.             content: "";
  194.             display: inline-flex;
  195.             height: 40px;
  196.             margin-bottom: auto;
  197.             margin-left: .5em;
  198.             width: 40px;
  199.         }
  200.         
  201.         [data-testid="receive_message"] > div:nth-of-type(1)::before {
  202.             align-self: center;
  203.             aspect-ratio: 1 / 1;
  204.             background: url(cmcicifaceurl) no-repeat center center / cover;
  205.             border-radius: 50%;
  206.             content: "";
  207.             display: inline-flex;
  208.             height: 40px;
  209.             margin-bottom: auto;
  210.             margin-right: .5em;
  211.             width: 40px;
  212.         }
  213.     }
  214.     
  215.     if darkmode {
  216.         [data-testid="chat_siderbar"] {
  217.             border-right: 1px solid #7e94fe !important;
  218.         }
  219.         [class*="send-message-box-content-"],
  220.         [class*="send-message-box-content-coco-"] {
  221.             background: rgba(50, 50, 50, 0.85);
  222.             border-radius: 1.5rem;
  223.         }
  224.         
  225.         body {
  226.             color: var(--s-color-text-primary);
  227.         }
  228.  
  229.         [class*="chat-input-container"] {
  230.             box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  231.                         rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  232.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  233.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  234.         }
  235.         [data-testid="create_conversation_button"] svg path,
  236.         svg[class*="short-cut-"] path,
  237.         svg[class*="short-cut-"] rect {
  238.             stroke: #7e94fe;
  239.         }
  240.         [data-testid="scroll_view"] svg path {
  241.             stroke: var(--s-color-text-primary);
  242.         }
  243.         .semi-space svg path {
  244.             fill: var(--s-color-text-primary);
  245.         }
  246.         
  247.         [class*="thread-creation-"] {
  248.             color: var(--s-color-brand-primary-default, #7e94fe);
  249.         }
  250.         
  251.         [class*="chat-input-"],
  252.         [class*="semi-input-textarea-wrapper"],
  253.         [data-testid="chat_input_input"] {
  254.             background: var(--s-color-bg-primary) !important;
  255.             border: 0 !important;
  256.             border-radius: 12px !important;
  257.         }
  258.         [data-testid="chat_input_send_button"]:disabled {
  259.             background-color: grey;
  260.         }
  261.         
  262.         [class*="section-item-"]:not([class*="active-"], [class*="section-item-title-"]):hover,
  263.         [data-testid="guidance_groups"] > div:hover,
  264.         .skill-bar-button > div:hover {
  265.             background: var(--s-color-bg-trans-primary) !important;
  266.         }
  267.         
  268.         [class*="to-bottom-button-"] {
  269.             background: var(--s-color-bg-tertiary);
  270.         }
  271.         
  272.         ::selection {
  273.             background: --s-color-bg-trans-primary;
  274.         }
  275.         
  276.         /* Dots when Cici is writing */
  277.         [data-testid="message_loading"] [class*="dot-flashing-"],
  278.         [data-testid="message_loading"] [class*="dot-flashing-"]::after,
  279.         [data-testid="message_loading"] [class*="dot-flashing-"]::before {
  280.             background-color: transparent !important;
  281.             color: rgba(203, 203, 203, 0.8) !important;
  282.         }
  283.         
  284.         [class*="header-P"] {
  285.             background: transparent;
  286.         }
  287.     }
  288.     
  289.     if hidedownload {
  290.         [data-testid="chat_header_download_client"],
  291.         [data-testid="chat_header_menu"] > div:nth-of-type(1),
  292.         [data-testid="chat_header_menu"] > button:nth-of-type(1),
  293.         [data-testid="chat_header_menu"] > button:nth-of-type(2),
  294.         [data-testid="chat_header_menu"] > button:nth-of-type(3),
  295.         [data-testid="chat_siderbar"] > div > div:last-child > [data-testid="sidebar_download_desktop_btn"],
  296.         [data-testid="chat_siderbar"] > div > div:last-child > div > div:nth-of-type(2) > div,
  297.         [data-testid="login_content"] > div > div > div:nth-of-type(1) {
  298.             display: none;
  299.         }
  300.     }
  301.  
  302.     if widemode {
  303.         /* Wide chat */
  304.         [style*="--right-side-width: 0px; --center-content-max-width:"] {
  305.             --center-content-max-width: 100% !important;
  306.         }
  307.         
  308.         /* Cici's face on home page */
  309.         @media (max-width: 600px) {
  310.             [class*="guidance-view-layout-"] {
  311.                 display: flex;
  312.                 flex-direction: column;
  313.                 height: calc(100vh - 216px);
  314.                 justify-content: center;
  315.                 padding: 10px 0;
  316.             }
  317.         }
  318.         
  319.         /* Full code block */
  320.         [class*="code-block-element-"] [class*="code-area-"] [class*="content-"] {
  321.             max-height: fit-content !important;
  322.         }
  323.         [class*="code-block-element-"] [class*="code-area-"] [class*="mask-"] {
  324.             background: transparent !important;
  325.         }
  326.         
  327.         /* Full attachment file name */
  328.         [data-testid="attachment_file_item"] {
  329.             min-width: 50% !important;
  330.         }
  331.         
  332.         /* Images sent by us */
  333.         [data-testid="message_content"] [class*="container-"] {
  334.             margin-left: auto;
  335.         }
  336.         [data-testid="mdbox_image"] {
  337.             border: 1px solid #7e94fe !important;
  338.             border-radius: 12px;
  339.         }
  340.         
  341.         /* Chat "bubbles" */
  342.         [class*="message-box__reverse-"] {
  343.             margin-left: auto;
  344.         }
  345.         [class*="send-message-"] {
  346.             display: flex;
  347.             justify-content: flex-end;
  348.             margin-left: auto;
  349.             max-width: 100%;
  350.         }
  351.         [data-testid="send_message"] [data-testid="message_content"] > div > [data-testid="message_text_content"] {
  352.             padding-bottom: 0.625rem !important;
  353.             padding-left: 1.25rem !important;
  354.             padding-right: 1.25rem !important;
  355.             padding-top: 0.625rem !important;
  356.         }
  357.         [data-testid="send_message"],
  358.         [data-testid="receive_message"] {
  359.             max-width: 80%;
  360.             min-width: 80%;
  361.             width: 100%;
  362.         }
  363.         
  364.         /* Avatar */
  365.         .semi-avatar img {
  366.             background-color: transparent !important;
  367.         }
  368.         [data-testid="chat_header_avatar_button"] {
  369.             height: 36px !important;
  370.             width: 36px !important;
  371.         }
  372.         
  373.         /* Help and comments */
  374.         [data-testid="feedback_modal"] > div:nth-of-type(2) > div {
  375.             width: 80% !important;
  376.         }
  377.     }
  378. }
  379.  
  380. @-moz-document url-prefix("https://www.cici.com/chat/bot/discover") {
  381. /* ========================================================
  382.     Bots
  383. ======================================================== */
  384.     if darkmode {
  385.         [class*="containerWrapper"] [class*="panelWrapper"] {
  386.             background: var(--chat-bg-color);
  387.         }
  388.  
  389.         [data-testid="bot_discover_search"] > div {
  390.             background: var(--s-color-bg-secondary) !important;
  391.         }
  392.         
  393.         [class*="newBotItem-"]:hover {
  394.             background: var(--s-color-bg-trans-primary)
  395.         }
  396.     }
  397.     
  398.     if widemode {
  399.         [class*="newBotItem-"] {
  400.             height: auto;
  401.             max-width: 100%;
  402.         }
  403.     }
  404. }
  405.  
  406. @-moz-document url-prefix("https://www.cici.com/chat/create-image") {
  407. /* ========================================================
  408.     Images
  409. ======================================================== */
  410.     if darkmode {
  411.         [class*="max-width-layout__full-width-"],
  412.         .bg-white {
  413.             background: var(--chat-bg-color) !important;
  414.         }
  415.     }
  416. }
  417.  
  418. @-moz-document url-prefix("https://www.cici.com/chat/collection") {
  419. /* ========================================================
  420.     Bookmarks
  421. ======================================================== */
  422.     if darkmode {
  423.         .collection-guide-popup-container,
  424.         .collection-guide-popup-container div[data-testid="scroll_view"] {
  425.             background: var(--chat-bg-color);
  426.         }
  427.         
  428.         [data-testid="scroll_view"] div[class*="wrapper-"] > div:nth-of-type(2) > div > div:nth-of-type(1)::after {
  429.             background: transparent;
  430.         }
  431.     }
  432.     
  433.     if widemode {
  434.         [class*="type-and-tag-filter-wrapper-"] {
  435.             margin-top: 3em;
  436.         }
  437.         
  438.         [data-testid="scroll_view"],
  439.         [data-testid="scroll_view"] > div {
  440.             margin-top: 1em;
  441.         }
  442.     }
  443. }
  444.  
  445. @-moz-document url-prefix("https://www.cici.com/chat/settings") {
  446. /* ========================================================
  447.     Settings
  448. ======================================================== */
  449.     :root {
  450.         --s-color-bg-trans: #2f2f2f;
  451.         --s-color-bg-trans-primary: rgba(126, 148, 254, 0.2);
  452.         --s-color-bg-primary: #212121;
  453.         --s-color-text-primary: #cbcbcb;
  454.         --s-color-text-secondary: #cbcbcb;
  455.         --s-color-text-tertiary: #cbcbcb;
  456.         --s-color-text-quaternary: #cbcbcb;
  457.         --semi-color-text-0: #cbcbcb;
  458.     }
  459.     
  460.     a {
  461.         color: #cbcbcb;
  462.     }
  463.     .semi-dropdown-content {
  464.         background: var(--s-color-bg-primary);
  465.     }
  466.     
  467.     /* Custom font size */
  468.     [class*="block-"] *,
  469.     li * {
  470.         font-size: fontsize !important;
  471.         line-height: 1.5 !important;
  472.         text-overflow: initial !important;
  473.     }
  474.     
  475.     /* Dropdown language */
  476.     .flow-dropdown-container > div > div {
  477.         align-items: center;
  478.         height: auto;
  479.     }
  480.     .semi-portal-inner {
  481.         transform: translate(-67%, 0%) !important;
  482.     }
  483.     
  484.     [data-testid="dropdown-menu-item"] p {
  485.         display: inline-flex;
  486.     }
  487.     [data-testid="dropdown-menu-item"]:not(:first-child) p:nth-of-type(2)::before {
  488.         content: "/";
  489.         margin-left: .3em;
  490.         margin-right: .3em;
  491.     }
  492. }
  493.  
  494. @-moz-document url-prefix("http://"), url-prefix("https://") {
  495. /* ========================================================
  496.     Browser plugin
  497. ======================================================== */
  498.     /* Translated by Cici */
  499.     if (customciciface=="cmlgciciface") || (customciciface=="cmsmciciface") {
  500.         .__Cici_translate_translated_inject_node__:before {
  501.             aspect-ratio: 1 / 1;
  502.             background: url(cmcicifaceurl) no-repeat center center / cover;
  503.             border-radius: cmciciavatarcorner;
  504.             content: "";
  505.             display: inline-block;
  506.             height: 1em;
  507.             margin: auto;
  508.             margin-right: .25em;
  509.             vertical-align: text-top;
  510.             width: 1em;
  511.         }
  512.     }
  513.     if (customciciface=="nocmciciface") {
  514.         .__Cici_translate_translated_inject_node__:before {
  515.             background: none;
  516.             display: none;
  517.         }
  518.     }
  519.     .__Cici_translate_translated_inject_node__ {
  520.         box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  521.                     rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  522.                     rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  523.                     rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  524.         border-radius: 12px;
  525.         padding: .25em;
  526.         width: fit-content;
  527.     }
  528. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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