☰

Cici responsive + customizations

Cici website is more suitable for wide screens.

目前為 2025-01-05 提交的版本，檢視 最新版本。

  1. /* ==UserStyle==
  2. @name           Cici responsive + customizations
  3. @version        1.0.8
  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    widemode            "Wide mode"                             1
  24. ==/UserStyle== */
  25.  
  26. /* === Credits ===
  27. Website         https://breat.fr
  28. facebook        https://www.facebook.com/breatfroff
  29. mastodon        https://mastodon.social/@breat_fr
  30. telegram        https://t.me/breatfr
  31. vk              https://vk.com/breatfroff
  32. X (twitter)     https://x.com/breatfroff
  33. === Credits === */
  34.  
  35. @-moz-document url-prefix("https://www.ciciai.com/chat/") {
  36. /* ========================================================
  37.     Website theme 
  38. ======================================================== */
  39.     /* Versions */
  40.     :root {
  41.         --themeversion: 'Theme v1.0.8 · ';
  42.         --scriptversion: 'Script v1.0.1 ';
  43.         --author: 'by BreatFR (https://breat.fr)';
  44.         --install1: ' usercssjs.breat.fr \A';
  45.         --install2: ' gitlab.com/breatfr/cici \A \A';
  46.         --support1: ' ko-fi.com/breatfr \A';
  47.         --support2: ' paypal.me/breat';
  48.  
  49.         --chat-area-max-width: 100%;
  50.         --self-message-box-max-width: 100%;
  51.         --chat-bg-color: #212121;
  52.         --color-neutral-100: #cbcbcb;
  53.         --dot-flashing-from: #cbcbcb;
  54.         --dot-flashing-to: rgba(203, 203, 203, 0.8);
  55.         --s-color-bg-primary: #2f2f2f;
  56.         --s-color-bg-secondary: #2f2f2f;
  57.         --s-color-bg-tertiary: #171717;
  58.         --s-color-bg-trans: rgba(255, 255, 255, 0.2);
  59.         --s-color-brand-primary-default: #7e94fe;
  60.         --s-color-text-primary: #cbcbcb;
  61.         --s-color-text-secondary: #cbcbcb;
  62.         --s-color-text-tertiary: #cbcbcb;
  63.         --s-color-text-quaternary: #cbcbcb;
  64.     }
  65.     
  66.     @media (min-width: 900px) {
  67.         [data-testid="chat_header_avatar_button"]::before {
  68.             background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  69.             background-clip: text;
  70.             -webkit-background-clip: text;
  71.             color: transparent;
  72.             content: var(--themeversion) var(--scriptversion) var(--author);
  73.             display: block;
  74.             font-family: Montserrat;
  75.             font-size: 1.2rem;
  76.             left: 50%;
  77.             line-height: 1.5;
  78.             max-width: max-content;
  79.             pointer-events: none;
  80.             position: fixed;
  81.             text-align: center;
  82.             top: .75em;
  83.             transform: translateX(-25%);
  84.             width: 100%;
  85.             white-space: wrap;
  86.         }
  87.     }
  88.  
  89.     [class*="leftVisible-"] [data-testid="bookmark_entry"]::after {
  90.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  91.         background-clip: text;
  92.         -webkit-background-clip: text;
  93.         bottom: 1em;
  94.         color: transparent;
  95.         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);
  96.         display: block;
  97.         font-family: Montserrat;
  98.         font-size: 1rem;
  99.         left: 0;
  100.         line-height: 1.5;
  101.         max-width: 280px;
  102.         pointer-events: none;
  103.         position: fixed;
  104.         text-align: center;
  105.         width: 100%;
  106.         white-space: pre-line;
  107.     }
  108.     
  109.     if (customciciface=="cmlgciciface") {
  110.         [data-testid="guidance_panel"]::before {
  111.             aspect-ratio: 1 / 1;
  112.             background: url(cmcicifaceurl) no-repeat center center / cover;
  113.             border-radius: cmciciavatarcorner;
  114.             content: "";
  115.             display: inline-block;
  116.             height: 100%;
  117.             margin: auto;
  118.             max-height: 256px;
  119.             min-height: 100px;
  120.             width: auto;
  121.         }
  122.         [data-testid="chat_siderbar"] img[style="width: 36px; height: 36px;"] {
  123.             aspect-ratio: 1 / 1;
  124.             background: url(cmcicifaceurl) no-repeat center center / cover;
  125.             border-radius: cmciciavatarcorner;
  126.             height: 0;
  127.             padding-left: 36px;
  128.             padding-top: 36px;
  129.             width: 0;
  130.         }
  131.     }
  132.     
  133.     if (customciciface=="cmsmciciface") {
  134.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div::before {
  135.             aspect-ratio: 1 / 1;
  136.             align-self: center;
  137.             background: url(cmcicifaceurl) no-repeat center center / cover;
  138.             border-radius: cmciciavatarcorner;
  139.             content: "";
  140.             display: inline-block;
  141.             height: 100%;
  142.             margin: auto;
  143.             margin-right: 0.5em;
  144.             max-height: 256px;
  145.             min-height: 100px;            
  146.             width: auto;
  147.         }
  148.         [data-testid="chat_siderbar"] img[style="width: 36px; height: 36px;"] {
  149.             aspect-ratio: 1 / 1;
  150.             background: url(cmcicifaceurl) no-repeat center center / cover;
  151.             border-radius: cmciciavatarcorner;
  152.             height: 0;
  153.             padding-left: 36px;
  154.             padding-top: 36px;
  155.             width: 0;
  156.         }
  157.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div {
  158.             align-items: center;
  159.         }
  160.     }
  161.     if (customciciface=="nocmciciface") {
  162.         [data-testid="guidance_panel"] > div:nth-of-type(1) > div::before {
  163.             background: none;
  164.             display: none;
  165.         }
  166.     }
  167.  
  168.     /* Custom font size */
  169.     .skill-bar-button *,
  170.     [data-testid="bot_discover_recommend_list"] *,
  171.     [data-testid="carousel-item"] *,
  172.     [data-testid="chat_input_input"] *,
  173.     [data-testid="guidance_groups_skill_card"] *,
  174.     [data-testid="union_message"] *,
  175.     textarea {
  176.         font-size: fontsize !important;
  177.         line-height: 1.5 !important;
  178.         text-overflow: initial !important;
  179.     }
  180.     
  181.     if chatmode && ouravatarurl {
  182.         [data-testid="send_message"] > div:nth-of-type(1)::before {
  183.             align-self: center;
  184.             aspect-ratio: 1 / 1;
  185.             background: url(ouravatarurl) no-repeat center center / cover;
  186.             border-radius: 50%;
  187.             content: "";
  188.             display: inline-flex;
  189.             height: 40px;
  190.             margin-bottom: auto;
  191.             margin-left: .5em;
  192.             width: 40px;
  193.         }
  194.         
  195.         [data-testid="receive_message"] > div:nth-of-type(1)::before {
  196.             align-self: center;
  197.             aspect-ratio: 1 / 1;
  198.             background: url(cmcicifaceurl) no-repeat center center / cover;
  199.             border-radius: 50%;
  200.             content: "";
  201.             display: inline-flex;
  202.             height: 40px;
  203.             margin-bottom: auto;
  204.             margin-right: .5em;
  205.             width: 40px;
  206.         }
  207.     }
  208.     
  209.     if darkmode {
  210.         [data-testid="chat_siderbar"] {
  211.             border-right: 1px solid #7e94fe !important;
  212.         }
  213.         [class*="send-message-box-content-"],
  214.         [class*="send-message-box-content-coco-"] {
  215.             background: rgba(50, 50, 50, 0.85);
  216.             border-radius: 1.5rem;
  217.         }
  218.         body {
  219.             color: #cbcbcb;
  220.         }
  221.  
  222.         [class*="chat-input-container"] {
  223.             box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  224.                         rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  225.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  226.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  227.         }
  228.         [data-testid="create_conversation_button"] svg path,
  229.         svg[class*="short-cut-"] path,
  230.         svg[class*="short-cut-"] rect {
  231.             stroke: #7e94fe;
  232.         }
  233.         [data-testid="scroll_view"] svg path {
  234.             stroke: #cbcbcb;
  235.         }
  236.         .semi-space svg path {
  237.             fill: #cbcbcb;
  238.         }
  239.         
  240.         [class*="thread-creation-"] {
  241.             color: var(--s-color-brand-primary-default, #7e94fe);
  242.         }
  243.         
  244.         [class*="chat-input-"],
  245.         [class*="semi-input-textarea-wrapper"],
  246.         [data-testid="chat_input_input"] {
  247.             background: #2f2f2f !important;
  248.             border: 0 !important;
  249.             border-radius: 12px !important;
  250.         }
  251.         [data-testid="chat_input_send_button"]:disabled {
  252.             background-color: grey;
  253.         }
  254.         a[class*="section-item-"]:not([class*="active-"]):hover {
  255.             background: rgba(126, 148, 254, 0.2) !important;
  256.         }
  257.         
  258.         [class*="to-bottom-button-"] {
  259.             background: var(--s-color-bg-tertiary);
  260.         }
  261.         
  262.         ::selection {
  263.             background: rgba(126, 148, 254, 0.2);
  264.         }
  265.         
  266.         /* Dots when Cici is writing */
  267.         [data-testid="message_loading"] [class*="dot-flashing-"],
  268.         [data-testid="message_loading"] [class*="dot-flashing-"]::after,
  269.         [data-testid="message_loading"] [class*="dot-flashing-"]::before {
  270.             background-color: rgba(203, 203, 203, 0.8) !important;
  271.             color: rgba(203, 203, 203, 0.8) !important;
  272.         }
  273.     }
  274.  
  275.     if widemode {
  276.         /* Wide chat */
  277.         [style*="--right-side-width: 0px; --center-content-max-width:"] {
  278.             --center-content-max-width: 100% !important;
  279.         }
  280.         
  281.         /* Cici's face on home page */
  282.         @media (max-width: 600px) {
  283.             [class*="guidance-view-layout-"] {
  284.                 display: flex;
  285.                 flex-direction: column;
  286.                 height: calc(100vh - 216px);
  287.                 justify-content: center;
  288.                 padding: 10px 0;
  289.             }
  290.         }
  291.         
  292.         /* Full code block */
  293.         [class*="code-block-element-"] [class*="code-area-"] [class*="content-"] {
  294.             max-height: fit-content !important;
  295.         }
  296.         [class*="code-block-element-"] [class*="code-area-"] [class*="mask-"] {
  297.             background: transparent !important;
  298.         }
  299.         
  300.         /* Images sent by us */
  301.         [data-testid="message_content"] [class*="container-"] {
  302.             margin-left: auto;
  303.         }
  304.         [data-testid="mdbox_image"] {
  305.             border: 1px solid #7e94fe !important;
  306.             border-radius: 12px;
  307.         }
  308.         
  309.         /* Chat "bubbles" */
  310.         [class*="message-box__reverse-"] {
  311.             margin-left: auto;
  312.         }
  313.         [class*="send-message-"] {
  314.             display: flex;
  315.             justify-content: flex-end;
  316.             margin-left: auto;
  317.             max-width: 100%;
  318.         }
  319.         [data-testid="send_message"] [data-testid="message_content"] > div > [data-testid="message_text_content"] {
  320.             padding-bottom: 0.625rem !important;
  321.             padding-left: 1.25rem !important;
  322.             padding-right: 1.25rem !important;
  323.             padding-top: 0.625rem !important;
  324.         }
  325.         [data-testid="send_message"],
  326.         [data-testid="receive_message"] {
  327.             max-width: 80%;
  328.             min-width: 80%;
  329.             width: 100%;
  330.         }
  331.         
  332.         /* Avatar */
  333.         .semi-avatar img {
  334.             background-color: transparent !important;
  335.         }
  336.         [data-testid="chat_header_avatar_button"] {
  337.             height: 36px !important;
  338.             width: 36px !important;
  339.         }
  340.         
  341.         /* Help and comments */
  342.         [data-testid="feedback_modal"] > div:nth-of-type(2) > div {
  343.             width: 80% !important;
  344.         }
  345.     }
  346. }
  347.  
  348. @-moz-document url-prefix("http://"), url-prefix("https://") {
  349. /* ========================================================
  350.     Browser plugin
  351. ======================================================== */
  352.     /* Translated by Cici */
  353.     if (customciciface=="cmlgciciface") || (customciciface=="cmsmciciface") {
  354.         .__Cici_translate_translated_inject_node__:before {
  355.             aspect-ratio: 1 / 1;
  356.             background: url(cmcicifaceurl) no-repeat center center / cover;
  357.             border-radius: cmciciavatarcorner;
  358.             content: "";
  359.             display: inline-block;
  360.             height: 1em;
  361.             margin: auto;
  362.             margin-right: .25em;
  363.             vertical-align: text-top;
  364.             width: 1em;
  365.         }
  366.     }
  367.     if (customciciface=="nocmciciface") {
  368.         .__Cici_translate_translated_inject_node__:before {
  369.             background: none;
  370.             display: none;
  371.         }
  372.     }
  373.     .__Cici_translate_translated_inject_node__ {
  374.         box-shadow: rgba(126, 148, 254, 0.2) -2px -2px 2px 2px,
  375.                     rgba(126, 148, 254, 0.2) -2px 2px 2px 2px,
  376.                     rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  377.                     rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  378.         border-radius: 12px;
  379.         padding: .25em;
  380.         width: fit-content;
  381.     }
  382. }