Switch branch
feat/multi-feature-pack maindefault
View all branches
Blame Raw
Cohee · 51ad27fb · · 580 lines (16.1 KB)
2 contributors 
1:root {


2    --big-avatar-height-factor: 1.8;


3    --big-avatar-width-factor: 1.2;


4    --big-avatar-border-factor: 5;


5}


6


7body.tts .mes[is_system="true"] .mes_narrate {


8    display: none;


9}


10


11body.sd .sd_message_gen,


12body.translate .mes_translate,


13body.tts .mes_narrate {


14    display: inline-block;


15}


16


17body:not(.tts) #ttsExtensionNarrateAll {


18    display: none;


19}


20


21body.no-hotswap .hotswap,


22body.no-hotswap .hotswap~hr,


23body.no-timer .mes_timer,


24body.no-timestamps .timestamp,


25body.no-tokenCount .tokenCounterDisplay,


26body.no-mesIDDisplay .mesIDDisplay,


27body.no-modelIcons .icon-svg,


28body.hideChatAvatars .mesAvatarWrapper .avatar {


29    display: none !important;


30}


31


32body.no-hotswap #CharListButtonAndHotSwaps .flex-container {


33    flex-wrap: nowrap;


34    align-items: flex-end;


35    flex-flow: row;


36}


37


38body.hideChatAvatars .last_mes:not(.smallSysMes) {


39    padding-bottom: 20px !important;


40}


41


42body.hideChatAvatars.no-timer.no-tokenCount.no-mesIDDisplay .swipe_left {


43    left: 0px;


44}


45


46body.hideChatAvatars .swipe_left {


47    left: 7px;


48}


49


50body.square-avatars .avatar,


51body.square-avatars .avatar img {


52    border-radius: var(--avatar-base-border-radius) !important;


53}


54


55body.rounded-avatars .avatar,


56body.rounded-avatars .avatar img {


57    border-radius: var(--avatar-base-border-radius-rounded) !important;


58}


59


60/*char list grid mode*/


61


62body.charListGrid #rm_print_characters_block {


63    display: flex;


64    gap: 5px;


65    flex-wrap: wrap;


66    flex-direction: row;


67    justify-content: space-around;


68    align-content: flex-start;


69}


70


71body.charListGrid #rm_print_characters_block .bogus_folder_select,


72body.charListGrid #rm_print_characters_block .character_select,


73body.charListGrid #rm_print_characters_block .group_select,


74#user_avatar_block.gridView .avatar-container {


75    width: 30%;


76    align-items: flex-start;


77    height: min-content;


78    flex-direction: column;


79    overflow: hidden;


80    max-width: 100px;


81}


82


83/* Save a bit of space here */


84body.charListGrid #rm_print_characters_block .character_name_block {


85    gap: 0;


86    margin-bottom: 0;


87}


88


89body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,


90body.charListGrid #rm_print_characters_block .bogus_folder_select .bogus_folder_counter,


91body.charListGrid #rm_print_characters_block .character_select .ch_name,


92body.charListGrid #rm_print_characters_block .group_select .ch_name,


93body.charListGrid #rm_print_characters_block .group_select .group_select_counter,


94#user_avatar_block.gridView .avatar-container .ch_name,


95#user_avatar_block.gridView .avatar-container .bogus_folder_counter,


96#user_avatar_block.gridView .avatar-container .group_select_counter,


97#user_avatar_block.gridView .avatar-container .ch_additional_info {


98    width: 100%;


99    max-width: 100px;


100    text-align: center;


101    font-size: calc(var(--mainFontSize) * .8);


102}


103


104body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,


105body.charListGrid #rm_print_characters_block .character_select .character_name_block,


106body.charListGrid #rm_print_characters_block .group_select .group_name_block,


107#user_avatar_block.gridView .avatar-container .character_name_block {


108    width: 100%;


109    flex-direction: column;


110}


111


112body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,


113body.charListGrid #rm_print_characters_block .character_select .character_select_container,


114body.charListGrid #rm_print_characters_block .group_select .group_select_container,


115#user_avatar_block.gridView .avatar-container .character_select_container,


116#user_avatar_block.gridView .avatar-container .group_select_container {


117    width: 100%;


118    justify-content: center;


119    max-width: 100px;


120}


121


122body.charListGrid #rm_print_characters_block .group_select {


123    width: 30%;


124    height: min-content;


125    align-items: center !important;


126    flex-direction: column;


127    overflow: hidden;


128    max-width: 100px;


129}


130


131body.charListGrid #rm_print_characters_block .group_select .group_name_block {


132    width: 100%;


133}


134


135body.charListGrid #rm_print_characters_block .ch_description,


136body.charListGrid #rm_print_characters_block .tags_inline,


137body.charListGrid #rm_print_characters_block .group_select_block_list,


138body.charListGrid #rm_print_characters_block .ch_avatar_url,


139body.charListGrid #rm_print_characters_block .character_version,


140body.charListGrid #rm_print_characters_block .character_name_block_sub_line,


141#user_avatar_block.gridView .avatar-container .ch_description,


142body.charListGrid #rm_print_characters_block .bogus_folder_select_back .bogus_folder_back_placeholder {


143    display: none;


144}


145


146body.charListGrid #rm_print_characters_block .bogus_folder_select_back .avatar {


147    display: flex !important;


148}


149


150/* Hack for keeping the spacing */


151/*


152body.charListGrid #rm_print_characters_block .ch_add_placeholder {


153    display: flex !important;


154    opacity: 0;


155}


156*/


157


158body.charListGrid #rm_print_characters_block .ch_additional_info {


159    display: none;


160}


161


162/*big avatars mode page-wide changes*/


163


164body.big-avatars .character_select .avatar,


165body.big-avatars .group_select .avatar,


166body.big-avatars .bogus_folder_select .avatar {


167    flex: unset;


168}


169


170body.big-avatars .avatar {


171    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


172    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));


173    /* width: unset; */


174    border-style: none;


175    display: flex;


176    justify-content: center;


177    flex-direction: column;


178    align-items: center;


179    /* align-self: unset; */


180    overflow: visible;


181    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));


182}


183


184body.big-avatars #user_avatar_block .avatar,


185body.big-avatars #user_avatar_block .avatar_upload {


186    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


187    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));


188    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));


189}


190


191body.big-avatars #user_avatar_block .avatar img {


192    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


193    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));


194}


195


196body.big-avatars .avatar img {


197    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


198    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));


199    object-fit: cover;


200    object-position: center;


201    border: 1px solid var(--SmartThemeBorderColor);


202    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));


203}


204


205body.big-avatars .bogus_folder_select_back .bogus_folder_back_placeholder {


206    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


207}


208


209body:not(.big-avatars) .avatar_collage {


210    min-width: var(--avatar-base-width);


211    aspect-ratio: 1 / 1;


212}


213


214body:not(.big-avatars) .avatar_collage img {


215    border-radius: 0% !important;


216}


217


218body.big-avatars .avatar_collage {


219    min-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


220    max-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));


221    aspect-ratio: 2 / 3;


222}


223


224body.big-avatars .ch_description,


225body.big-avatars .avatar-container .ch_description {


226    display: -webkit-box;


227    -webkit-line-clamp: 3;


228    -webkit-box-orient: vertical;


229    white-space: pre-line;


230    text-overflow: unset;


231}


232


233body.big-avatars .avatars_inline_small .avatar,


234body.big-avatars .avatars_inline_small .avatar img {


235    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));


236    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor));


237}


238


239body.big-avatars .avatars_inline {


240    max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));


241}


242


243body.big-avatars .avatars_inline.avatars_multiline {


244    max-height: fit-content;


245}


246


247body.big-avatars .avatars_inline.avatars_inline_small {


248    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));


249}


250


251body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {


252    height: inherit;


253}


254


255body:not(.big-avatars) .avatars_inline_small .avatar_collage {


256    min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));


257}


258


259body.big-avatars .avatars_inline_small .avatar_collage {


260    min-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));


261    max-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));


262}


263


264/* border radius for big avatars collages */


265


266body.big-avatars .collage_2 .img_1 {


267    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) !important;


268}


269


270body.big-avatars .collage_2 .img_2 {


271    border-radius: 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 !important;


272}


273


274body.big-avatars .collage_3 .img_1 {


275    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 0 !important;


276}


277


278body.big-avatars .collage_3 .img_2 {


279    border-radius: 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 !important;


280}


281


282body.big-avatars .collage_3 .img_3 {


283    border-radius: 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) !important;


284}


285


286body.big-avatars .collage_4 .img_1 {


287    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 0 !important;


288}


289


290body.big-avatars .collage_4 .img_2 {


291    border-radius: 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 !important;


292}


293


294body.big-avatars .collage_4 .img_3 {


295    border-radius: 0 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) !important;


296}


297


298body.big-avatars .collage_4 .img_4 {


299    border-radius: 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 !important;


300}


301


302


303


304/*bubble chat style*/


305


306body.bubblechat .mes {


307    padding: 10px;


308    border-radius: 10px;


309    background-color: var(--SmartThemeBotMesBlurTintColor);


310    margin-bottom: 5px;


311    border: 1px solid var(--SmartThemeBorderColor);


312}


313


314body.bubblechat .mes[is_user="true"] {


315    background-color: var(--SmartThemeUserMesBlurTintColor);


316}


317


318


319/* Document Style */


320


321body.documentstyle #chat .mes:not(.last_mes) {


322    padding: 5px 10px 0px 10px;


323}


324


325body.documentstyle .last_mes {


326    padding-top: 0;


327}


328


329body.documentstyle #chat .mes .mes_text {


330    padding: 0;


331}


332


333body.documentstyle #chat .mes .mes_block {


334    margin-right: 30px;


335}


336


337body.documentstyle #chat .mes .mes_text {


338    margin-left: 20px;


339}


340


341body.documentstyle #chat .last_mes .mes_text {


342    margin-left: 20px;


343    min-height: 70px;


344}


345


346body.documentstyle #chat .last_mes:has(> .del_checkbox[style*="display: block"]) .mes_text {


347    margin-left: 0px;


348}


349


350body.documentstyle #chat .last_mes .swipe_left {


351    left: 5px;


352}


353


354body.documentstyle #chat .mes .mesAvatarWrapper,


355body.documentstyle #chat .mes .mes_block .ch_name .name_text,


356body.documentstyle #chat .mes .mes_block .ch_name .timestamp,


357body.documentstyle #chat .mes .mes_block .ch_name .timestamp-icon,


358body.documentstyle .mes:not(.last_mes) .ch_name .mes_buttons {


359    display: none !important;


360}


361


362body.documentstyle #chat .mes_block .ch_name {


363    min-height: unset;


364}


365


366/*FastUI blur removal*/


367


368body.no-blur * {


369    backdrop-filter: unset !important;


370}


371


372/* body.no-blur #send_form.no-connection {


373    background-color: rgba(100, 0, 0, 0.9) !important;


374} */


375


376body.no-blur #bg1,


377body.no-blur #bg_custom {


378    filter: unset;


379


380}


381


382body.no-blur #top-bar,


383body.no-blur #send_form {


384    background-color: var(--SmartThemeBlurTintColor) !important;


385}


386


387/* wAIfu mode*/


388


389body.waifuMode #top-bar {


390    border-radius: 0 0 20px 20px;


391    border: 1px solid var(--SmartThemeBorderColor);


392}


393


394body.waifuMode #sheld {


395    height: 40vh;


396    height: 40dvh;


397    top: calc(100% - 40vh);


398    bottom: 0;


399}


400


401body.waifuMode #chat {


402    border-top: 1px solid var(--SmartThemeBorderColor);


403    border-radius: 20px 20px 0 0;


404}


405


406body.waifuMode #expression-wrapper {


407    justify-content: center;


408}


409


410body.waifuMode .expression-holder {


411    max-height: 90vh;


412    max-width: 90vw;


413    height: 90vh;


414    width: fit-content;


415    bottom: 0;


416    filter: drop-shadow(2px 2px 2px #51515199);


417    z-index: 2;


418    margin: 0 auto;


419    left: 0;


420    right: 0;


421}


422


423body.waifuMode .zoomed_avatar {


424    min-width: 100px;


425    min-height: 100px;


426    max-height: 90vh;


427    max-width: 90vh;


428    width: calc((100vw - var(--sheldWidth)) /2);


429    position: absolute;


430    padding: 0;


431    filter: drop-shadow(2px 2px 2px #51515199);


432    z-index: 29;


433    overflow: hidden;


434    display: none;


435    left: 0;


436    right: 0;


437    margin: 0 auto;


438    top: 50px;


439    aspect-ratio: 2 / 3;


440    height: auto;


441}


442


443/* movingUI*/


444


445body.movingUI .drag-grabber {


446    display: inline;


447}


448


449body.movingUI #sheld,


450body.movingUI .drawer-content,


451body.movingUI #expression-holder,


452body.movingUI .zoomed_avatar,


453body.movingUI .draggable,


454body.movingUI #floatingPrompt {


455    resize: both;


456}


457


458#expression-image.default,


459#expression-holder:has(.default) {


460    height: 120px;


461    margin-top: 0;


462    top: 50px;


463    justify-content: center;


464}


465


466/*No Text Shadows Mode*/


467


468body.noShadows * {


469    text-shadow: none !important;


470}


471


472body.expandMessageActions .mes .mes_buttons .extraMesButtons {


473    display: inherit !important;


474}


475


476body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {


477    display: none !important;


478}


479


480#smooth_streaming_control:has(#smooth_streaming:not(:checked))~#smooth_streaming_speed_control,


481#smooth_streaming_control:has(#smooth_streaming:not(:checked))~#smooth_streaming_no_think_control {


482    display: none;


483}


484


485.mdhotkey_icon {


486    opacity: 0.6;


487}


488


489label[for="trim_spaces"]:has(input:checked) i.warning {


490    display: none;


491}


492


493label[for="trim_spaces"]:not(:has(input:checked)) small {


494    color: var(--warning);


495    opacity: 1;


496}


497


498#claude_function_prefill_warning {


499    display: none;


500    color: red;


501    font-weight: bold;


502}


503


504#openai_settings:has(#openai_function_calling:checked):has(#claude_assistant_prefill:not(:placeholder-shown), #claude_assistant_impersonation:not(:placeholder-shown)) #claude_function_prefill_warning {


505    display: flex;


506    align-items: center;


507    gap: 5px;


508    margin: 10px 0;


509}


510


511#mistralai_other_models:empty {


512    display: none;


513}


514


515#banned_tokens_block_ooba:not(:has(#send_banned_tokens_textgenerationwebui:checked)) #banned_tokens_controls_ooba {


516    filter: brightness(0.5);


517}


518


519#bind_preset_to_connection:checked~.toggleOff {


520    display: none;


521}


522


523#bind_preset_to_connection:not(:checked)~.toggleOn {


524    display: none;


525}


526


527label[for="bind_preset_to_connection"]:has(input:checked) {


528    color: var(--active);


529}


530


531#openai_settings input[type="checkbox"]:not(:checked)~[data-cc-toggle],


532#openai_settings input[type="checkbox"]:not(:checked)~*:has([data-cc-toggle]),


533#openai_settings [data-cc-toggle="false"]>.icon-supported,


534#openai_settings [data-cc-toggle="true"]>.icon-unsupported {


535    display: none;


536}


537


538#openai_settings [data-cc-toggle="true"]>.icon-supported {


539    color: var(--active);


540}


541


542#openai_settings [data-cc-toggle="false"]>.icon-unsupported {


543    color: var(--golden);


544}


545


546#advanced-formatting-cc-notice {


547    display: none;


548    gap: 5px;


549    align-items: baseline;


550    margin: 5px 0;


551    padding: 5px 10px;


552}


553


554#top-settings-holder:has(#main_api option[value="openai"]:checked) #advanced-formatting-cc-notice {


555    display: flex;


556}


557


558#top-settings-holder:has(#main_api option[value="openai"]:checked) #AdvancedFormatting [data-cc-null] {


559    opacity: 0.5;


560    filter: grayscale(0.5);


561    cursor: not-allowed;


562}


563


564#request_images_block:has(#openai_request_images:not(:checked)) #request_images_settings {


565    display: none;


566}


567


568#openai_settings:has(#openai_function_calling:not(:checked)) #tool_call_recurse_limit_block {


569    display: none;


570}


571


572#adaptive_p_block:has([data-tg-samplers="adaptive_target"][style*="display: none"]):has([data-tg-samplers="adaptive_decay"][style*="display: none"]) {


573    display: none;


574}


575


576#openrouter_provider_warning_text,


577#openrouter_provider_warning_chat {


578    color: var(--warning);


579    margin-left: 5px;


580}