☰

Cici responsive + customizations

Cici website is more suitable for wide screens.

Fra 30.12.2024. Se den seneste versjonen.

/* ==UserStyle==
@name           Cici responsive + customizations
@version        1.0.0
@description    Cici website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/cici
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    text        fontsize    "Custom font size"  1.2rem
@var    checkbox    darkmode    "Dark mode"         1
@var    checkbox    widemode    "Wide mode"         1
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document url-prefix("https://www.ciciai.com/chat/") {
    /* Custom font size */
    .skill-bar-button *,
    [data-testid="bot_discover_recommend_list"] *,
    [data-testid="carousel-item"] *,
    [data-testid="guidance_groups_skill_card"] *,
    [data-testid="union_message"] *,
    textarea {
        font-size: fontsize !important;
        line-height: 1.5 !important;
    }
    
    if darkmode {
        [data-testid="chat_siderbar"] {
            background: var(--s-color-bg-tertiary);
            border-right: 1px solid #0057ff !important;
        }

        [class*="chat-input-container"] {
            box-shadow: rgba(0, 87, 255, 0.2) -2px -2px 2px 2px,
                        rgba(0, 87, 255, 0.2) -2px 2px 2px 2px,
                        rgba(0, 87, 255, 0.2) 2px -2px 2px 2px,
                        rgba(0, 87, 255, 0.2) 2px 2px 2px 2px;
        }
        svg[class*="short-cut"] {
            stroke: #0057ff;
        }
    }

    if widemode {
        :root * {
            --chat-area-max-width: 100% !important;
            --center-content-max-width: 100% !important;
            --chat-bg-color: #f3f4f6 !important;
            --s-color-bg-tertiary: #f3f4f6 !important;
        }
        
        /* Avatar */
        .semi-avatar img {
            background-color: transparent !important;
        }
        [data-testid="chat_header_avatar_button"] {
            height: 36px !important;
            width: 36px !important;
        }
    }
}