☰

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.2
  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.2 · ';
  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.  
  41.     [data-testid="bookmark_entry"]::after {
  42.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  43.         background-clip: text;
  44.         -webkit-background-clip: text;
  45.         bottom: 1em;
  46.         color: transparent;
  47.         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);
  48.         display: block;
  49.         font-family: Montserrat;
  50.         font-size: 1rem;
  51.         left: 0;
  52.         line-height: 1.5;
  53.         max-width: 280px;
  54.         position: fixed;
  55.         text-align: center;
  56.         width: 100%;
  57.         white-space: pre-line;
  58.     }
  59.  
  60.     /* Custom font size */
  61.     .skill-bar-button *,
  62.     [data-testid="bot_discover_recommend_list"] *,
  63.     [data-testid="carousel-item"] *,
  64.     [data-testid="guidance_groups_skill_card"] *,
  65.     [data-testid="union_message"] *,
  66.     textarea {
  67.         font-size: fontsize !important;
  68.         line-height: 1.5 !important;
  69.     }
  70.     
  71.     if darkmode {
  72.         [data-testid="chat_siderbar"] {
  73.             background: var(--s-color-bg-tertiary);
  74.             border-right: 1px solid #0057ff !important;
  75.         }
  76.  
  77.         [class*="chat-input-container"] {
  78.             box-shadow: rgba(0, 87, 255, 0.2) -2px -2px 2px 2px,
  79.                         rgba(0, 87, 255, 0.2) -2px 2px 2px 2px,
  80.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  81.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  82.         }
  83.         svg[class*="short-cut"] {
  84.             stroke: #0057ff;
  85.         }
  86.     }
  87.  
  88.     if widemode {
  89.         * {
  90.             --chat-area-max-width: 100% !important;
  91.             --center-content-max-width: 100% !important;
  92.             --self-message-box-max-width: 100% !important;
  93.             --chat-bg-color: #f3f4f6 !important;
  94.             --s-color-bg-tertiary: #f3f4f6 !important;
  95.         }
  96.         
  97.         /* Cici's face on home page */
  98.         @media (max-width: 600px) {
  99.             [class*="guidance-view-layout-"] {
  100.                 display: flex;
  101.                 flex-direction: column;
  102.                 height: calc(100vh - 216px);
  103.                 justify-content: center;
  104.                 padding: 10px 0;
  105.             }
  106.         }
  107.         [data-testid="guidance_panel"]::before {
  108.             aspect-ratio: 1 / 1;
  109.             background: url("https://gitlab.com/breatfr/cici/-/raw/main/docs/cici-icon.png") no-repeat center center / cover;
  110.             content: "";
  111.             display: inline-block;
  112.             height: 100%;
  113.             margin: auto;
  114.             max-height: 256px;
  115.             min-height: 100px;
  116.             width: auto;
  117.         }
  118.         
  119.         /* Images sent by us */
  120.         [data-testid="message_content"] [class*="container-"] {
  121.             margin-left: auto;
  122.         }
  123.         [data-testid="mdbox_image"] {
  124.             border: 1px solid #0057ff !important;
  125.             border-radius: 12px;
  126.         }
  127.         
  128.         /* Our code block */
  129.         [class*="send-message-box-content"] {
  130.             max-width: 100% !important;
  131.             width: 100% !important;
  132.         }
  133.         
  134.         /* Avatar */
  135.         .semi-avatar img {
  136.             background-color: transparent !important;
  137.         }
  138.         [data-testid="chat_header_avatar_button"] {
  139.             height: 36px !important;
  140.             width: 36px !important;
  141.         }
  142.     }
  143. }
  144.  
  145. @-moz-document url-prefix("http://"), url-prefix("https://") {
  146. /* ========================================================
  147.     Browser plugin
  148. ======================================================== */
  149.     /* Translated by Cici */
  150.     .__Cici_translate_translated_inject_node__:before {
  151.         background: url("https://gitlab.com/breatfr/cici/-/raw/main/docs/cici-icon.png") no-repeat center center / cover;
  152.         content: "";
  153.         display: inline-block;
  154.         height: 1.2rem;
  155.         margin: auto;
  156.         margin-right: 5px;
  157.         vertical-align: middle;
  158.         width: 1.2rem;
  159.     }
  160.     .__Cici_translate_translated_inject_node__ {
  161.         box-shadow: rgba(0, 87, 255, 0.2) -2px -2px 2px 2px,
  162.                         rgba(0, 87, 255, 0.2) -2px 2px 2px 2px,
  163.                         rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
  164.                         rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
  165.         border-radius: 12px;
  166.         padding: 5px 10px;
  167.     }
  168. }