migrate

public/css/accounts.css

@@ -0,0 +1,5 @@
+.userAccount {
+    border: 1px solid var(--SmartThemeBorderColor);
+    padding: 5px 10px;
+    border-radius: 5px;
+}

public/css/animations.css

@@ -0,0 +1,121 @@
+/* Fade animations with opacity */
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Pop animations with opacity and vertical scaling */
+@keyframes pop-in {
+    0% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+
+    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
+    33% {
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes pop-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+
+    66% {
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+}
+
+/* Flashing for highlighting animation */
+@keyframes flash {
+    0%, 50%, 100% {
+        opacity: 1;
+    }
+
+    25%, 75% {
+        opacity: 0.2;
+    }
+}
+
+/* Pulsing highlight, slightly resizing the element */
+@keyframes pulse {
+    from {
+        transform: scale(1);
+        filter: brightness(1.1);
+    }
+
+    to {
+        transform: scale(1.01);
+        filter: brightness(1.3);
+    }
+}
+
+/* Ellipsis animation */
+@keyframes ellipsis {
+    0% {
+        content: ""
+    }
+
+    25% {
+        content: "."
+    }
+
+    50% {
+        content: ".."
+    }
+
+    75% {
+        content: "..."
+    }
+}
+
+/* HEINOUS */
+@keyframes infinite-spinning {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* STscript animation */
+@keyframes script_progress_pulse {
+
+    0%,
+    100% {
+        border-top-color: var(--progColor);
+    }
+
+    50% {
+        border-top-color: var(--progFlashColor);
+    }
+}

public/css/bright.min.css

@@ -0,0 +1,7 @@
+/*!
+  Theme: Bright
+  Author: Chris Kempson (http://chriskempson.com)
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#e0e0e0;background:#000}.hljs ::selection,.hljs::selection{background-color:#505050;color:#e0e0e0}.hljs-comment{color:#b0b0b0}.hljs-tag{color:#d0d0d0}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e0e0e0}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#fb0120}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#fc6d24}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#fda331}.hljs-strong{font-weight:700;color:#fda331}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1c659}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#76c7b7}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#6fb3d2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#d381c3}.hljs-emphasis{color:#d381c3;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#be643c}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

public/css/character-group-overlay.css

@@ -0,0 +1,104 @@
+
+#rm_print_characters_block.group_overlay_mode_select .character_select {
+    transition: background-color 0.4s ease;
+    background-color: rgba(170, 170, 170, 0.15);
+}
+
+#rm_print_characters_block.group_overlay_mode_select .bogus_folder_select,
+#rm_print_characters_block.group_overlay_mode_select .group_select {
+    cursor: auto;
+    filter: saturate(0.3);
+}
+
+#rm_print_characters_block.group_overlay_mode_select .bogus_folder_select:hover,
+#rm_print_characters_block.group_overlay_mode_select .group_select:hover {
+    background: none;
+}
+
+#rm_print_characters_block.group_overlay_mode_select .character_select input.bulk_select_checkbox {
+    display: none !important;
+}
+
+#rm_print_characters_block.group_overlay_mode_select .character_select.character_selected {
+    background-color: var(--SmartThemeQuoteColor);
+}
+
+#rm_print_characters_block.group_overlay_mode_select .character_select .bulk_select_checkbox {
+    visibility: hidden;
+    height: 0 !important;
+}
+
+#character_context_menu.hidden { display: none; }
+#character_context_menu {
+    position: absolute;
+    padding: 3px;
+    z-index: 9998;
+    background-color: var(--black90a);
+    border: 1px solid var(--black90a);
+    border-radius: 10px;
+}
+
+#character_context_menu ul li button {
+    border: 0;
+    border-bottom-color: currentcolor;
+    color: var(--SmartThemeQuoteColor);
+    background-color: transparent;
+    font-weight: bold;
+    font-size: 1em;
+    padding: 0.5em;
+    border-bottom: 1px dotted var(--SmartThemeQuoteColor);
+    width: 100%;
+    cursor: pointer;
+}
+
+#character_context_menu ul li button:hover {
+    background-color: var(--SmartThemeBlurTintColor);
+}
+
+#character_context_menu ul li:last-child button {
+    border-bottom: 0;
+}
+
+#character_context_menu ul li #character_context_menu_delete {
+    color: var(--fullred);
+}
+
+#character_context_menu ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#character_context_menu .character_context_menu_separator {
+    height: 1px;
+    background-color: var(--SmartThemeBotMesBlurTintColor);
+}
+
+#character_context_menu li:hover {
+    background-color: var(--SmartThemeBotMesBlurTintColor);
+}
+
+#bulkEditButton.bulk_edit_overlay_active {
+    color: var(--golden);
+}
+
+#bulk_tag_shadow_popup {
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    background-color: var(--black30a);
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    z-index: 9998;
+    top: 0;
+}
+
+#bulk_tag_shadow_popup #bulk_tag_popup {
+    padding: 1em;
+}
+
+#bulk_tag_shadow_popup #bulk_tag_popup #dialogue_popup_controls .menu_button {
+    width: unset;
+    padding: 0.25em;
+}

public/css/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.5.13
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2022-11-20T05:30:43.444Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

public/css/extensions-panel.css

@@ -0,0 +1,148 @@
+/* Extensions */
+#extensions_url {
+    display: block;
+}
+
+.extensions_block input[type="submit"]:hover {
+    background-color: green;
+}
+
+.extensions_block input[type="checkbox"],
+.extensions_block input[type="radio"] {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+label[for="extensions_autoconnect"] {
+    display: flex;
+    align-items: center;
+    margin: 0 !important;
+}
+
+.extensions_url_block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.extensions_url_block h4 {
+    display: inline;
+}
+
+.extensions_block {
+    clear: both;
+    padding: 0.05px;
+}
+
+.extensions_info {
+    text-align: left;
+}
+
+.extensions_info h3 {
+    margin-bottom: 0.5em;
+}
+
+.extensions_info h4 {
+    margin-bottom: 0.5em;
+}
+
+.extensions_info p {
+    margin-bottom: 0.5em;
+    margin-left: 1em;
+}
+
+.extensions_info .disabled {
+    color: lightgray;
+}
+
+.extensions_info .toggle_enable {
+    color: lightgreen;
+}
+
+.extensions_info .toggle_disable {
+    color: rgb(238, 144, 144);
+}
+
+.extensions_info .extension_enabled {
+    font-weight: bold;
+}
+
+.extensions_info .extension_disabled {
+    color: lightgray;
+}
+
+.extensions_info .extension_missing {
+    color: gray;
+}
+
+.extensions_info .extension_modules {
+    font-size: 0.8em;
+    font-weight: normal;
+}
+
+.extensions_info .extension_block {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 5px;
+    margin-bottom: 5px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 5px;
+}
+
+.extensions_info .extension_name {
+    font-size: 1.05em;
+}
+
+.extensions_info .extension_version {
+    opacity: 0.8;
+    font-size: 0.8em;
+    font-weight: normal;
+    margin-left: 2px;
+}
+
+.extensions_info .extension_block a {
+    color: var(--SmartThemeBodyColor);
+}
+
+.extensions_info .extension_name.update_available {
+    color: limegreen;
+}
+
+input.extension_missing[type="checkbox"] {
+    opacity: 0.5;
+}
+
+.update-button {
+    margin-right: 10px;
+    display: inline-flex;
+}
+
+/* Fixes order of settings for extensions */
+#extensions_settings,
+#extensions_settings2 {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Fixes order of settings for extensions */
+.extension_container {
+    display: contents;
+}
+
+#extensionsMenu>div.extension_container:empty {
+    display: none;
+}
+
+.extensions_info .extension_text_block {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.extensions_info .extension_actions {
+    flex-wrap: nowrap;
+}

public/css/file-form.css

@@ -0,0 +1,57 @@
+.file_attached {
+    display: flex;
+    min-width: 150px;
+    max-width: calc(var(--sheldWidth) * 0.9);
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    margin: 0.25em auto;
+    padding: 0 0.75em;
+    border: 2px solid var(--SmartThemeBorderColor);
+    border-radius: 15px;
+    background-color: var(--white20a);
+}
+
+.mes_file_container {
+    cursor: default;
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    width: fit-content;
+    max-width: 100%;
+    background-color: var(--white20a);
+    border: 2px solid var(--SmartThemeBorderColor);
+    padding: 0.5em 1em;
+    border-radius: 15px;
+}
+
+.mes_file_container .right_menu_button {
+    padding-right: 0;
+}
+
+.mes_file_container .mes_file_size,
+.file_attached .file_size {
+    font-size: 0.9em;
+    color: var(--SmartThemeQuoteColor);
+}
+
+.file_attached .file_name,
+.mes_file_container .mes_file_name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#file_form {
+    display: flex;
+    width: 100%;
+}
+
+.file_modal {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    text-align: left;
+}

public/css/group-avatars.css

@@ -0,0 +1,91 @@
+.avatar_collage {
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.avatar_collage img {
+    position: absolute;
+    overflow: hidden;
+}
+
+.collage_2 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 100%;
+    width: 50%;
+    height: 100%;
+}
+
+.collage_2 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 100%;
+    width: 50%;
+    height: 100%;
+}
+
+.collage_3 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_3 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_3 .img_3 {
+    left: 0;
+    top: 50%;
+    max-width: 100%;
+    max-height: 50%;
+    width: 100%;
+    height: 50%;
+}
+
+.collage_4 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_3 {
+    left: 0;
+    top: 50%;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_4 {
+    left: 50%;
+    top: 50%;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}

public/css/loader.css

@@ -0,0 +1,31 @@
+#preloader {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+    z-index: 999999;
+    width: 100vw;
+    height: 100vh;
+    width: 100dvw;
+    height: 100dvh;
+    background-color: var(--SmartThemeBlurTintColor);
+    color: var(--SmartThemeBodyColor);
+    /*for some reason the full screen blur does not work on iOS*/
+    backdrop-filter: blur(30px);
+    opacity: 1;
+}
+
+#load-spinner {
+    --spinner-size: 2em;
+    transition: all 300ms ease-out;
+    opacity: 1;
+    top: calc(50% - var(--spinner-size) / 2);
+    left: calc(50% - var(--spinner-size) / 2);
+    position: absolute;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

public/css/login.css

@@ -0,0 +1,50 @@
+body.login #shadow_popup {
+    opacity: 1;
+    display: flex;
+}
+
+body.login .logo {
+    max-width: 30px;
+}
+
+body.login #logoBlock {
+    align-items: center;
+    margin: 0 auto;
+    gap: 10px;
+}
+
+body.login .userSelect {
+    display: flex;
+    flex-direction: column;
+    color: var(--SmartThemeBodyColor);
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 5px;
+    padding: 3px 5px;
+    width: 30%;
+    cursor: pointer;
+    margin: 5px 0;
+    transition: background-color 0.15s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    overflow: hidden;
+}
+
+body.login .userSelect .userName,
+body.login .userSelect .userHandle {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body.login .userSelect:hover {
+    background-color: var(--black30a);
+}
+
+body.login #handleEntryBlock,
+body.login #passwordEntryBlock,
+body.login #passwordRecoveryBlock {
+    margin: 2px;
+}

public/css/logprobs.css

@@ -0,0 +1,144 @@
+#logprobsViewer {
+    overflow-y: auto;
+    max-width: 90dvw;
+    max-height: 90dvh;
+    min-width: 100px;
+    min-height: 50px;
+    border-radius: 10px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    position: fixed;
+    padding: 10px;
+    display: none;
+    flex-direction: column;
+    box-shadow: 0 0 10px var(--black70a);
+    z-index: 3000;
+    left: 0;
+    top: 0;
+    margin: 0;
+    right: unset;
+    width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
+}
+
+.logprobs_panel_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logprobs_panel_title {
+    font-weight: bold;
+}
+
+.logprobs_panel_controls {
+    display: flex;
+    align-items: center;
+}
+
+.logprobs_panel_content {
+    overflow-y: auto;
+}
+
+.logprobs_panel_control_button {
+    width: 25px;
+    height: 25px;
+    margin-left: 5px;
+    opacity: 0.5;
+    transition: all 250ms;
+    position: unset !important;
+}
+
+.logprobs_panel_control_button:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+#logprobs_generation_output {
+    user-select: none;
+    height: 100%;
+    overflow-y: auto;
+    word-break: break-all;
+}
+
+.logprobs_empty_state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.5;
+    min-height: 100px;
+    text-align: center;
+}
+
+.logprobs_output_prefix {
+    opacity: 0.5;
+}
+
+.logprobs_output_prefix:hover {
+    background-color: rgba(255, 0, 50, 0.4);
+}
+
+.logprobs_output_prefix:hover ~ .logprobs_output_prefix {
+    background-color: rgba(255, 0, 50, 0.4);
+}
+
+.logprobs_candidate_list {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 2px;
+    padding: 2px;
+    border-top: 1px solid var(--SmartThemeBodyColor);
+    text-align: center;
+}
+
+.logprobs_top_candidate {
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+}
+
+.logprobs_top_candidate:not([disabled]) {
+    cursor: pointer;
+}
+
+.logprobs_top_candidate.selected {
+    background-color: rgba(0, 255, 0, 0.2);
+    font-weight: bold;
+}
+
+.logprobs_top_candidate:not([disabled]):hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.logprobs_tint_0 {
+    background-color: rgba(255, 255, 0, 0.05);
+}
+
+.logprobs_tint_0:hover, .logprobs_tint_0.selected {
+    background-color: rgba(255, 255, 0, 0.4);
+}
+
+.logprobs_tint_1 {
+    background-color: rgba(255, 0, 255, 0.05);
+}
+
+.logprobs_tint_1:hover, .logprobs_tint_1.selected {
+    background-color: rgba(255, 0, 255, 0.4);
+}
+
+.logprobs_tint_2 {
+    background-color: rgba(0, 255, 255, 0.05);
+}
+
+.logprobs_tint_2:hover, .logprobs_tint_2.selected {
+    background-color: rgba(0, 255, 255, 0.4);
+}
+
+.logprobs_tint_3 {
+    background-color: rgba(50, 205, 50, 0.05);
+}
+
+.logprobs_tint_3:hover, .logprobs_tint_3.selected {
+    background-color: rgba(50, 205, 50, 0.4);
+}

public/css/mobile-styles.css

@@ -0,0 +1,502 @@
+/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
+@media screen and (max-width: 1000px) {
+
+    #UI-Theme-Block,
+    #UI-Customization,
+    #power-user-options-block,
+    #ContextSettings,
+    #InstructSettingsColumn,
+    #InstructSequencesColumn {
+        flex-basis: 100%;
+    }
+
+
+    #send_form.compact #leftSendForm,
+    #send_form.compact #rightSendForm {
+        flex-wrap: nowrap;
+        width: unset;
+    }
+
+    #sheldWidthToggleBlock {
+        display: none;
+    }
+
+    .bg_button {
+        font-size: 15px;
+    }
+
+    .mes_text img {
+        width: 100%;
+    }
+
+    #extensions_settings,
+    #extensions_settings2 {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+
+    body:not(.waifuMode) .zoomed_avatar {
+        min-width: 100px;
+        min-height: 100px;
+        position: absolute;
+        padding: 0;
+        filter: drop-shadow(2px 2px 2px #51515199);
+        z-index: 30;
+        overflow: hidden;
+        right: 0;
+        width: fit-content;
+        max-height: calc(60vh - 60px);
+        max-height: calc(60dvh - 60px);
+        max-width: 90vw;
+        max-width: 90dvw;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
+    }
+
+    .zoomed_avatar .dragClose {
+        display: unset;
+    }
+
+    /* .world_entry_thin_controls, */
+    #persona-management-block,
+    #character_popup .flex-container {
+        flex-direction: column;
+    }
+
+    #WIMultiSelector {
+        align-self: normal;
+    }
+
+    .WIEntryContentAndMemo {
+        flex-flow: column;
+    }
+
+    .WIEntryContentAndMemo .world_entry_thin_controls {
+        width: 100%;
+    }
+
+    .world_entry_form_control.world_entry_form_horizontal {
+        /* flex-direction: column; */
+        align-items: flex-start;
+        row-gap: 0.5rem;
+    }
+
+    .world_entry_form_control.world_entry_form_horizontal .world_popup_expander {
+        display: none;
+    }
+
+    .world_entry .inline-drawer-toggle {
+        padding-bottom: 5px;
+    }
+
+    #worldInfoScanningCheckboxes {
+        flex-flow: row;
+        flex-wrap: wrap;
+    }
+
+    body {
+        touch-action: none;
+        overflow: hidden;
+        position: fixed;
+    }
+
+    .world_entry_form_control {
+        /* width: 100%; */
+    }
+
+    .drawer-content {
+        min-width: unset;
+        width: 100dvw;
+        max-height: calc(100vh - 45px);
+        max-height: calc(100dvh - 45px);
+        position: fixed;
+        left: 0;
+        top: 5px;
+        border: 1px solid var(--SmartThemeBorderColor);
+    }
+
+    .drawer-content .floating_panel_maximize,
+    .drawer-content .inline-drawer-maximize {
+        display: none;
+    }
+
+    #select_chat_popup {
+        align-items: start;
+        height: min-content;
+        align-content: start;
+        max-width: unset;
+    }
+
+    #wiActivationSettings,
+    #wiTopBlock {
+        flex-direction: column;
+    }
+
+    #top-settings-holder,
+    #top-bar {
+        position: fixed;
+        width: 100vw;
+        width: 100dvw;
+    }
+
+    #bg1,
+    #bg_custom {
+        height: 100vh !important;
+        height: 100dvh !important;
+        width: 100vw !important;
+        width: 100dvw !important;
+        background-position: center;
+
+    }
+
+
+    #sheld,
+    #character_popup,
+    .drawer-content {
+        width: 100dvw !important;
+        margin: 0 auto;
+        max-width: 100dvw;
+        left: 0 !important;
+        resize: none !important;
+        top: var(--topBarBlockSize);
+    }
+
+    .wi-settings {
+        flex-direction: column;
+        gap: 5px !important;
+    }
+
+    .WIEntryTitleAndStatus,
+    .WIEntryHeaderControls {
+        width: 100%;
+    }
+
+    #WIEntryHeaderTitlesPC {
+        display: none;
+    }
+
+    .WIEntryHeaderTitleMobile {
+        display: block !important;
+    }
+
+    #character_popup,
+    #world_popup {
+        overflow-y: auto;
+    }
+
+    #character_popup,
+    #send_form {
+        border: 1px solid var(--SmartThemeBorderColor);
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+        max-width: 100dvw;
+    }
+
+    #chat {
+        border-left: 1px solid var(--SmartThemeBorderColor);
+        border-right: 1px solid var(--SmartThemeBorderColor);
+        border-bottom: 1px solid var(--SmartThemeBorderColor);
+        align-items: start;
+        align-content: start;
+        overflow-y: auto;
+        overflow-x: hidden
+    }
+
+    .mes_buttons {
+        font-size: calc(var(--mainFontSize)*1.2);
+    }
+
+    .drag-grabber,
+    .pull-tab {
+        display: none !important;
+
+    }
+
+    #groupCurrentMemberPopoutButton,
+    #summaryExtensionPopoutButton {
+        display: none;
+    }
+
+    #right-nav-panel,
+    #left-nav-panel,
+    #floatingPrompt,
+    #cfgConfig,
+    #logprobsViewer,
+    #movingDivs>div {
+        /* 100vh are fallback units for browsers that don't support dvh */
+        height: calc(100vh - 45px);
+        height: calc(100dvh - 45px);
+        min-width: 100dvw !important;
+        width: 100dvw !important;
+        max-width: 100dvw !important;
+        overflow-y: hidden;
+        border-left: 1px solid var(--SmartThemeBorderColor);
+        border-right: 1px solid var(--SmartThemeBorderColor);
+        border-bottom: 1px solid var(--SmartThemeBorderColor);
+        border-radius: 0 0 20px 20px;
+        top: var(--topBarBlockSize) !important;
+        left: 0 !important;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    }
+
+    /*
+    #right-nav-panel {
+        padding-right: 15px;
+    }
+    */
+
+    #floatingPrompt,
+    #cfgConfig,
+    #logprobsViewer,
+    #movingDivs>div {
+        height: min-content;
+    }
+
+    #right-nav-panel h4 {
+        margin: 5px auto;
+    }
+
+    #result_info {
+        font-size: calc(var(--mainFontSize) - .1rem);
+    }
+
+    /*     .avatar_div {
+        margin-top: 5px;
+    } */
+
+    #character_popup {
+        width: 100%;
+        border-radius: 0 0 20px 20px;
+        margin-top: 0px;
+        height: calc(100% - var(--topBarBlockSize));
+    }
+
+    .drawer25pWidth {
+        flex-basis: max(calc(100% / 4 - 10px), 190px);
+    }
+
+    .drawer33pWidth {
+        flex-basis: max(calc(100% / 3 - 10px), 190px);
+    }
+
+    .expression-holder {
+        display: none;
+    }
+
+    body.waifuMode #sheld {
+        height: 40vh;
+        height: 40dvh;
+        top: 60vh;
+        top: 60dvh;
+        bottom: 0 !important;
+    }
+
+    body:not(.waifuMode) #expression-wrapper {
+        visibility: hidden;
+    }
+
+    #visual-novel-wrapper {
+        position: unset !important;
+    }
+
+    body.waifuMode .expression-holder {
+        /*display: inline;*/
+
+        max-width: 100vw;
+        height: 100vh;
+        width: max-content;
+        margin: 0 auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        filter: drop-shadow(2px 2px 2px #51515199);
+        z-index: 1 !important;
+    }
+
+    body.waifuMode img.expression {
+        object-fit: cover;
+    }
+
+    body.waifuMode .zoomed_avatar_container {
+        height: 100%;
+    }
+
+    body.waifuMode .zoomed_avatar {
+        width: fit-content;
+        max-height: calc(60vh - 60px);
+        max-height: calc(60dvh - 60px);
+        max-width: 90vw;
+        max-width: 90dvw;
+    }
+
+    .scrollableInner {
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: calc(100vh - 90px);
+        max-height: calc(100dvh - 90px);
+    }
+
+    .horde_multiple_hint {
+        display: none;
+    }
+
+    .bg_list {
+        width: unset;
+    }
+}
+
+/*landscape mode phones and ipads*/
+@media screen and (max-width: 1000px) and (orientation: landscape) {
+    body.waifuMode img.expression {
+        object-fit: contain;
+    }
+
+    .tag.excluded:after {
+        top: unset;
+        bottom: unset;
+    }
+
+    body:not(.waifuMode) .zoomed_avatar {
+        max-height: calc(60vh - 60px);
+        max-height: calc(60dvh - 60px);
+        max-width: 90vw;
+        max-width: 90dvw;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
+    }
+}
+
+/*portrait mode phones*/
+@media screen and (max-width: 450px) {
+
+    body:not(.waifuMode) .zoomed_avatar {
+        min-width: 100px;
+        min-height: 100px;
+        max-height: 50vh;
+        max-width: 90vw;
+        position: absolute;
+        padding: 0;
+        filter: drop-shadow(2px 2px 2px #51515199);
+        z-index: 30;
+        overflow: hidden;
+        display: none;
+        right: 0;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        width: 100%;
+    }
+
+    .drawer25pWidth {
+        flex-basis: max(calc(100% / 2 - 10px), 180px);
+    }
+
+    .drawer33pWidth {
+        flex-basis: max(calc(100% / 2 - 10px), 180px);
+    }
+
+    .BGSampleTitle {
+        display: none;
+    }
+
+    .tag.excluded:after {
+        top: unset;
+        bottom: unset;
+    }
+
+
+    #leftSendForm,
+    #rightSendForm {
+        width: 1.15em;
+        flex-wrap: wrap;
+        height: unset;
+    }
+}
+
+/*iOS specific*/
+@supports (-webkit-touch-callout: none) {
+    body {
+        margin: 0 auto;
+    }
+
+    #top-bar {
+        width: 100vw;
+    }
+
+    #sheld {
+        margin: unset;
+        padding: unset;
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+        width: 100vw;
+        width: 100dvw;
+        height: calc(100vh - 36px);
+        height: calc(100dvh - 36px);
+        padding-right: max(env(safe-area-inset-right), 0px);
+        padding-left: max(env(safe-area-inset-left), 0px);
+        padding-bottom: 0;
+    }
+
+    body.PWA #sheld {
+        padding-right: max(env(safe-area-inset-right), 2px);
+        padding-left: max(env(safe-area-inset-left), 2px);
+        padding-bottom: max(env(safe-area-inset-bottom), 15px);
+
+    }
+
+    #character_popup,
+    #world_popup,
+    #left-nav-panel,
+    #right-nav-panel,
+    .drawer-content {
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        height: calc(100vh - 70px);
+        height: calc(100dvh - 70px);
+        width: calc(100dvw - 5px);
+        max-height: calc(100vh - 70px);
+        max-height: calc(100dvh - 70px);
+        max-width: calc(100dvw - 5px);
+
+    }
+
+    #character_popup,
+    #world_popup,
+    .drawer-content {
+        margin-top: 36px;
+    }
+
+    .scrollableInner {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    #horde_model {
+        height: unset;
+    }
+}

public/css/popup-safari-fix.css

@@ -0,0 +1,19 @@
+/* iPhone copium land */
+body.safari .popup .popup-body:has(.maximized_textarea),
+body.safari .popup.large_dialogue_popup .popup-body {
+    height: 100%;
+}
+
+body.safari .popup .popup-body {
+    height: fit-content;
+    max-height: 90vh;
+    max-height: 90dvh;
+}
+
+body.safari #select_chat_div {
+    height: auto;
+}
+
+body.safari #select_chat_popup {
+    height: max-content;
+}

public/css/popup.css

@@ -0,0 +1,193 @@
+@import url('/lib/dialog-polyfill.css');
+@import url('./popup-safari-fix.css');
+
+dialog {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Closed state of the dialog */
+.popup {
+    width: 500px;
+    text-align: center;
+    box-shadow: 0px 0px 14px var(--black70a);
+    border: 1px solid var(--SmartThemeBorderColor);
+    padding: 4px 14px;
+    background-color: var(--SmartThemeBlurTintColor);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+
+    max-height: calc(100dvh - 2em);
+    max-width: calc(100dvw - 2em);
+    min-height: fit-content;
+
+    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */
+    overflow: visible;
+
+    /* Fix weird animation issue with font-scaling during popup open */
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+
+    /* Variables setup */
+    --popup-animation-speed: var(--animation-duration-slow);
+}
+
+/** Popup styles applied to the main popup */
+.popup--animation-fast { --popup-animation-speed: var(--animation-duration); }
+.popup--animation-slow { --popup-animation-speed: var(--animation-duration-slow); }
+.popup--animation-none { --popup-animation-speed: 0ms; }
+
+/* Styling of main popup elements */
+.popup .popup-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: min(100%, 100vw);
+    height: 100%;
+    padding: 1px;
+}
+
+.popup:not(:has(.img_enlarged_container)) .popup-body {
+    max-height: 95dvh;
+}
+
+.popup .popup-content {
+    margin-top: 10px;
+    padding: 0 8px;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.popup .popup-content h3:first-child {
+    /* No double spacing for the first heading needed, the .popup-content already has margin */
+    margin-top: 0px;
+}
+
+.popup.vertical_scrolling_dialogue_popup .popup-content {
+    overflow-y: auto;
+}
+
+.popup.horizontal_scrolling_dialogue_popup .popup-content {
+    overflow-x: auto;
+}
+
+.popup.left_aligned_dialogue_popup .popup-content {
+    text-align: start;
+}
+
+/* Opening animation */
+.popup[opening] {
+    animation: pop-in var(--popup-animation-speed) ease-in-out;
+}
+
+.popup[opening]::backdrop {
+    animation: fade-in var(--popup-animation-speed) ease-in-out;
+}
+
+/* Open state of the dialog */
+.popup[open] {
+    color: var(--SmartThemeBodyColor);
+}
+
+.popup[open]::backdrop {
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    background-color: var(--black30a);
+}
+
+body.no-blur .popup[open]::backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+/* Closing animation */
+.popup[closing] {
+    animation: pop-out var(--popup-animation-speed) ease-in-out;
+}
+
+.popup[closing]::backdrop {
+    animation: fade-out var(--popup-animation-speed) ease-in-out;
+}
+
+.popup #toast-container {
+    /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
+    height: 100dvh;
+    top: calc(50% + var(--topBarBlockSize));
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    /* Fix text align, popups are centered by default. toasts should not. */
+    text-align: left;
+}
+
+.popup-crop-wrap {
+    margin: 10px auto;
+    max-height: 75vh;
+    max-height: 75dvh;
+    max-width: 100%;
+}
+
+.popup-crop-wrap img {
+    max-width: 100%;
+    /* This rule is very important, please do not ignore this! */
+}
+
+.popup-inputs {
+    margin-top: 10px;
+    font-size: smaller;
+    opacity: 0.7;
+}
+
+.popup-input {
+    margin-top: 10px;
+}
+
+.popup-controls {
+    margin-top: 10px;
+    display: flex;
+    align-self: center;
+    gap: 20px;
+}
+
+.menu_button.menu_button_default {
+    box-shadow: 0 0 5px var(--white20a);
+}
+
+.menu_button.popup-button-ok {
+    background-color: var(--crimson70a);
+}
+
+.menu_button.popup-button-ok:hover {
+    background-color: var(--crimson-hover);
+}
+
+.popup-controls .menu_button {
+    /* Popup buttons should not scale to smallest size, otherwise they will always break to multiline if multiple words */
+    width: unset;
+
+    /* Fix weird animation issue with fonts on brightness filter */
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.popup-controls .menu_button:hover:focus-visible {
+    filter: brightness(1.3) saturate(1.3);
+}
+
+.popup .popup-button-close {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 24px;
+    height: 24px;
+    font-size: 20px;
+    padding: 2px 3px 3px 2px;
+
+    filter: brightness(0.8);
+
+    /* Fix weird animation issue with font-scaling during popup open */
+    backface-visibility: hidden;
+}
+

public/css/promptmanager.css

@@ -0,0 +1,368 @@
+#completion_prompt_manager .caution {
+    color: var(--fullred);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list {
+    display: flex;
+    flex-direction: column;
+    min-height: 300px;
+}
+
+#completion_prompt_manager .completion_prompt_manager_list_separator hr {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    width: 100%;
+    margin: 0.5em 0;
+    background-image: linear-gradient(90deg, var(--transparent), var(--SmartThemeBorderColor), var(--transparent));
+    min-height: 1px;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li {
+    display: grid;
+    grid-template-columns: 4fr 80px 45px;
+    margin-bottom: 0.5em;
+    width: 100%
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .completion_prompt_manager_prompt_name .fa-solid {
+    color: var(--white50a);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .completion_prompt_manager_prompt_name .fa-solid[data-role] {
+    vertical-align: unset;
+    margin-left: 3px;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_invisible {
+    display: none;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_visible {
+    display: grid;
+}
+
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_list_head .prompt_manager_prompt_tokens,
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_tokens {
+    font-size: calc(var(--mainFontSize)*0.9);
+    text-align: right;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .prompt_manager_prompt_controls {
+    text-align: right;
+}
+
+#completion_prompt_manager .completion_prompt_manager_list_head {
+    padding: 0.5em 0.5em 0;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt {
+    align-items: center;
+    padding: 0.5em;
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_controls {
+    display: flex;
+    justify-content: space-between;
+    font-size: calc(var(--mainFontSize)*1.2);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_controls span {
+    display: flex;
+    height: 18px;
+    width: 18px;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 0.25em;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    height: 20px;
+    width: 20px;
+    filter: drop-shadow(0px 0px 2px black);
+    opacity: 0.4;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span:hover {
+    opacity: 1;
+}
+
+#completion_prompt_manager_popup #completion_prompt_manager_popup_edit,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_chathistory_edit,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_dialogueexamples_edit,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_inspect {
+    display: none;
+    padding: 0.5em;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry {
+    padding: 0.5em;
+    flex: 1;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_control:has(#completion_prompt_manager_popup_entry_form_prompt) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_prompt {
+    flex: 1;
+}
+
+#completion_prompt_manager_popup #completion_prompt_manager_popup_inspect .completion_prompt_manager_popup_entry {
+    padding: 0.5em;
+}
+
+#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_inspect_list {
+    margin-top: 1em;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_prompt {
+    margin: 1em 0;
+    padding: 0.5em;
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#completion_prompt_manager_popup #completion_prompt_manager_popup_close_button {
+    font-size: 1em;
+    padding: 0.5em;
+}
+
+.completion_prompt_manager_popup_entry_form_control {
+    margin-top: 1em;
+}
+
+#prompt-manager-reset-character,
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset {
+    color: rgb(220 173 16);
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_close,
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset,
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_save {
+    font-size: 1.25em;
+    padding: 0.5em;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_control #completion_prompt_manager_popup_entry_form_prompt {
+    min-height: 200px;
+}
+
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry .completion_prompt_manager_popup_entry_form_footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1em;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_draggable {
+    cursor: grab;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_name {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_name .prompt-manager-inspect-action {
+    color: var(--SmartThemeBodyColor);
+    cursor: pointer;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_name .prompt-manager-inspect-action:hover {
+    text-decoration: underline;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name,
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name .prompt-manager-inspect-action {
+    color: var(--white30a);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:not(.completion_prompt_manager_prompt_disabled) .prompt-manager-toggle-action {
+    color: var(--SmartThemeQuoteColor);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt.completion_prompt_manager_prompt_disabled {
+    border: 1px solid var(--white20a);
+}
+
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .mes_edit {
+    margin-left: 0.5em;
+}
+
+#completion_prompt_manager .completion_prompt_manager_error {
+    padding: 1em;
+    border: 3px solid var(--fullred);
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
+
+#completion_prompt_manager .completion_prompt_manager_header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--white50a);
+    margin-top: 0.5em;
+    padding: 0 0.25em;
+    width: 100%
+}
+
+#completion_prompt_manager .completion_prompt_manager_header div {
+    margin-top: 0.5em;
+    width: fit-content;
+}
+
+#completion_prompt_manager .completion_prompt_manager_header_advanced {
+    display: flex;
+    margin-right: 0.25em;
+}
+
+#completion_prompt_manager .completion_prompt_manager_header_advanced span {
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 0.25em;
+    transition: 0.3s ease-in-out;
+    filter: drop-shadow(0px 0px 2px black);
+}
+
+#completion_prompt_manager .completion_prompt_manager_header_advanced span.fa-solid {
+    display: inherit;
+}
+
+#completion_prompt_manager .completion_prompt_manager_footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 0.25em;
+    padding: 0 0.25em;
+    width: 100%
+}
+
+#completion_prompt_manager .completion_prompt_manager_footer a {
+    font-size: 12px;
+}
+
+#completion_prompt_manager .completion_prompt_manager_important a {
+    font-weight: 600;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .completion_prompt_manager_prompt_name .fa-solid.prompt-manager-overridden {
+    margin-left: 3px;
+    color: var(--SmartThemeQuoteColor);
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle:not(.ui-sortable-handle) {
+    display: none;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:has(.drag-handle.ui-sortable-handle) {
+    position: relative;
+    padding-left: 20px;
+}
+
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+}
+
+#completion_prompt_manager_footer_append_prompt {
+    font-size: 1em;
+}
+
+#prompt-manager-export-format-popup {
+    padding: 0.25em;
+    display: none;
+}
+
+#prompt-manager-export-format-popup[data-show] {
+    display: block;
+}
+
+#completion_prompt_manager_popup {
+    margin-top: 0;
+}
+
+#completion_prompt_manager_popup {
+    overflow-y: auto;
+    height: calc(100% - var(--topBarBlockSize));
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: var(--topBarBlockSize);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    padding: 1em;
+    border: 1px solid var(--SmartThemeBorderColor);
+    flex-direction: column;
+    z-index: 3010 !important;
+    border-radius: 0 0 20px 20px;
+    background-color: var(--SmartThemeBlurTintColor);
+}
+
+#prompt-manager-export-format-popup {
+    display: none;
+}
+
+.prompt-manager-export-format-popup-flex {
+    display: flex;
+    flex-direction: column;
+}
+
+.prompt-manager-export-format-popup-flex .row {
+    display: flex;
+    justify-content: space-between;
+}
+
+.prompt-manager-export-format-popup-flex a,
+.prompt-manager-export-format-popup-flex span {
+    display: flex;
+    margin: auto 0;
+    justify-content: space-between;
+}
+
+@media screen and (max-width: 412px) {
+    #completion_prompt_manager_popup {
+        max-width: 100%;
+    }
+
+    #completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
+        margin-left: 0.5em;
+    }
+}
+
+.completion_prompt_manager_popup_entry_form_control:has(#completion_prompt_manager_popup_entry_form_prompt:disabled)>div:first-child::after {
+    content: attr(external_piece_text);
+    display: block;
+    width: 100%;
+    font-weight: 600;
+    text-align: center;
+}
+
+.completion_prompt_manager_popup_entry_form_control #completion_prompt_manager_popup_entry_form_prompt:disabled {
+    visibility: hidden;
+}

public/css/rm-groups.css

@@ -0,0 +1,236 @@
+/* GROUP CHATS */
+
+.group_pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#rm_group_chats_block .tag.filterByGroups {
+    display: none;
+}
+
+#rm_button_group_chats h2 {
+    margin-top: auto;
+    margin-bottom: auto;
+    color: rgb(188, 193, 200, 1);
+    border: 1px solid var(--SmartThemeBorderColor);
+    ;
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 6px;
+    border-radius: 10px;
+}
+
+#rm_group_chats_block {
+    display: none;
+    align-items: flex-start;
+    padding: 0 5px;
+    overflow-y: auto;
+}
+
+#rm_group_chats_block h3,
+#rm_group_chats_block h5 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+#rm_group_buttons>div {
+    display: flex;
+    flex-direction: column;
+}
+
+#rm_group_buttons .checkbox {
+    display: flex;
+}
+
+#rm_group_buttons .checkbox h4 {
+    display: inline-block;
+}
+
+#rm_group_buttons>input {
+
+    cursor: pointer;
+    user-select: none;
+}
+
+#rm_group_buttons>input:disabled {
+    filter: brightness(0.3);
+    cursor: unset;
+}
+
+#rm_group_buttons textarea {
+    margin: 0px;
+    min-width: 200px;
+}
+
+#rm_group_members,
+#rm_group_add_members {
+    margin-top: 0.25rem;
+    margin-bottom: 0.5rem;
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 10px;
+    background-color: var(--black30a);
+    padding: 2px;
+}
+
+#rm_group_buttons_expander {
+    flex-grow: 1;
+}
+
+#rm_group_delete {
+    color: rgb(190, 0, 0);
+}
+
+#rm_group_members:empty {
+    width: 100%;
+    padding: 0.5em 0;
+}
+
+#rm_group_members:empty::before {
+    content: 'Group is empty';
+
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+#rm_group_add_members:empty {
+    width: 100%;
+}
+
+#rm_group_add_members_header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 10px;
+}
+
+#rm_group_add_members_header input {
+    flex: 1;
+    width: 100%;
+}
+
+#rm_group_add_members:empty::before {
+    content: 'No characters available';
+
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+.group_member_icon {
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+    justify-content: end;
+    flex-grow: 1;
+}
+
+.group_member {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.group_member .group_member_name {
+    flex-grow: 1;
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 110px);
+    display: flex;
+    gap: 5px;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.group_member_icon .flex-container {
+    gap: 0px;
+}
+
+#rm_group_members .right_menu_button,
+#rm_group_add_members .right_menu_button {
+    padding: 0px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+}
+
+#rm_group_members .right_menu_button[data-action="speak"],
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {
+    opacity: 0.4;
+    filter: brightness(0.5);
+    transition: all 0.2s ease-in-out;
+}
+
+/* #rm_group_members .right_menu_button[data-action="speak"]:hover, */
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"]:hover {
+    opacity: inherit;
+    filter: drop-shadow(0px 0px 5px rgb(243, 166, 65));
+}
+
+#rm_group_members .group_member.disabled .right_menu_button[data-action="enable"] {
+    filter: drop-shadow(0px 0px 5px rgb(243, 166, 65));
+}
+
+
+#rm_group_members .right_menu_button[data-action="speak"]:hover {
+    opacity: inherit;
+    filter: drop-shadow(0px 0px 5px rgb(153, 255, 153));
+}
+
+/* Rules for icon display */
+#rm_group_add_members .right_menu_button:not([data-action="add"], [data-action="view"]),
+#rm_group_members .right_menu_button[data-action="add"],
+#rm_group_members .group_member.disabled .right_menu_button[data-action="disable"],
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="enable"] {
+    display: none;
+}
+
+.group_select {
+    display: flex;
+    flex-direction: row;
+    padding: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.group_select:hover {
+    background-color: var(--white30a);
+}
+
+.group_select .avatar {
+    flex: 0;
+}
+
+.group_select .group_icon {
+    width: 20px;
+    height: 20px;
+    margin: 0 10px;
+}
+
+.group_select .group_fav_icon {
+    filter: drop-shadow(0px 0px 1px black);
+    color: #c5b457;
+    font-size: 12px;
+    order: -1;
+    margin-left: -18px;
+    margin-top: 3px;
+}
+
+.group_member .avatar {
+    flex-shrink: 0;
+    flex-basis: auto;
+}

public/css/scrollable-button.css

@@ -0,0 +1,18 @@
+.scrollable-buttons-container {
+    max-height: 50vh;  /* Use viewport height instead of fixed pixels */
+    -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
+    margin-top: 1rem; /* m-t-1 is equivalent to margin-top: 1rem; */
+    flex-shrink: 1;
+    min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.scrollable-buttons-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.scrollable-buttons-container::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}

public/css/select2-overrides.css

@@ -0,0 +1,284 @@
+/* Customize the Select2 container */
+.select2-container {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Customize the dropdown */
+.select2-dropdown {
+    background-color: var(--SmartThemeBlurTintColor);
+    border: 1px solid var(--SmartThemeBorderColor) !important;
+    border-radius: 10px;
+    box-shadow: 0 0 5px black;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
+    color: var(--SmartThemeBodyColor);
+    z-index: 40000;
+    user-select: none;
+}
+
+.select2-container .select2-selection .select2-selection__clear {
+    color: var(--SmartThemeBodyColor);
+    font-size: 20px;
+    padding: 0;
+    position: absolute;
+    right: 5px;
+    top: 0;
+}
+
+.select2-container .select2-search__field {
+    opacity: 0.8;
+}
+
+.select2-selection--single .select2-selection__placeholder {
+    color: var(--SmartThemeEmColor);
+}
+
+.select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: var(--SmartThemeEmColor);
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered {
+    color: var(--SmartThemeBodyColor);
+    line-height: revert;
+    padding-left: unset;
+}
+
+.select2-container .select2-results>.select2-results__options {
+    max-height: 300px;
+}
+
+.select2-container .select2-selection--multiple .select2-selection__choice__remove {
+    padding: revert;
+    border-right: 1px solid var(--SmartThemeBorderColor);
+    font-size: 1.1em;
+    line-height: 1;
+}
+
+.select2-container .select2-selection--multiple .select2-selection__choice__display {
+    padding-left: 5px;
+}
+
+/* Customize the search input */
+.select2-search__field {
+    background-color: var(--black30a);
+    color: var(--SmartThemeBodyColor);
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 7px;
+    font-family: var(--mainFontFamily);
+    padding: 3px 5px;
+}
+
+/* Customize the selected option */
+.select2-selection--single {
+    border: 1px solid var(--SmartThemeShadowColor);
+    border-radius: 4px;
+    background-color: var(--SmartThemeBlurTintColor);
+}
+
+/* Customize the selected option text */
+.select2-selection__rendered {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Customize the option list item */
+.select2-results__option {
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--SmartThemeBodyColor);
+}
+
+.select2-container .select2-selection--multiple,
+.select2-container .select2-selection--single {
+    background-color: var(--black30a);
+    color: var(--SmartThemeBodyColor);
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 7px;
+    font-family: var(--mainFontFamily);
+    padding: 3px 5px;
+}
+
+.select2-container.select2-container--focus .select2-selection--multiple,
+.select2-container.select2-container--focus .select2-selection--single {
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+
+.select2-container .select2-results .select2-results__option--disabled {
+    color: inherit;
+    background-color: inherit;
+    cursor: not-allowed;
+    filter: brightness(0.5);
+}
+
+.select2-container .select2-selection--multiple .select2-selection__choice,
+.select2-container .select2-selection--single .select2-selection__choice {
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black30a);
+    border-color: var(--SmartThemeBorderColor);
+    font-size: calc(var(--mainFontSize) - 5%);
+    text-shadow: none !important;
+}
+
+.select2-results .select2-results__option--selectable {
+    background-color: unset;
+    color: var(--SmartThemeBodyColor);
+    opacity: 0.5;
+    transition: opacity 200ms ease-in-out;
+    position: relative;
+}
+
+.select2-results .select2-results__option--group {
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--SmartThemeBlurTintColor);
+    position: relative;
+}
+
+/* Customize the hovered option list item */
+.select2-results .select2-results__option--highlighted.select2-results__option--selectable {
+    color: var(--SmartThemeBodyColor);
+    background-color: unset;
+    opacity: 1;
+}
+
+.select2-results__option.select2-results__option--group::before {
+    display: none;
+}
+
+/* Customize the option list item */
+.select2-results__option {
+    padding-left: 30px;
+    /* Add some padding to make room for the checkbox */
+}
+
+.select2-results .select2-results__option--group .select2-results__options--nested .select2-results__option {
+    padding-left: 2em;
+}
+
+/* Add the custom checkbox */
+.select2-results__option::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    margin-top: -7px;
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    background-color: var(--SmartThemeBlurTintColor);
+    border-radius: 2px;
+}
+
+.select2-container .select2-selection--multiple .select2-selection__choice__remove,
+.select2-container .select2-selection--single .select2-selection__choice__remove {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Add the custom checkbox checkmark */
+.select2-results__option--selected.select2-results__option::before {
+    content: '\2713';
+    font-weight: bold;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--SmartThemeBlurTintColor);
+    text-align: center;
+    line-height: 14px;
+}
+
+.select2-results__option.select2-results__message {
+    background-color: inherit;
+}
+
+.select2-results__option.select2-results__message::before {
+    display: none;
+}
+
+.select2-selection__choice__display {
+    /* Fix weird alignment of the inside block */
+    margin-left: 3px;
+    margin-right: 1px;
+}
+
+/* Styling for choice remove icon */
+span.select2.select2-container .select2-selection__choice__remove {
+    cursor: pointer;
+    transition: background-color 0.3s;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black50a);
+}
+
+span.select2.select2-container .select2-selection__choice__remove:hover {
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--white30a);
+}
+
+/* Custom class to support styling to show clickable choice options */
+.select2_choice_clickable+span.select2-container .select2-selection__choice__display {
+    cursor: pointer;
+}
+
+.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
+    cursor: pointer;
+    transition: background-color 0.3s;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black50a);
+    white-space: break-spaces;
+    word-break: break-all;
+}
+
+.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display:hover {
+    background-color: var(--white30a);
+}
+
+/* Custom class to support same line multi inputs of select2 controls */
+.select2_multi_sameline+span.select2-container .select2-selection--multiple {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
+    /* Allow search placeholder to take up all space if needed */
+    flex-grow: 1;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
+    /* Fix weird styling choice or huge margin around selected options */
+    margin-block-start: 2px;
+    margin-block-end: 2px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 5px;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__choice {
+    margin-top: 0px;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search__field {
+    /* Min height to reserve spacing */
+    min-height: calc(var(--mainFontSize) + 13px);
+    /* Min width to be clickable */
+    min-width: 4em;
+    align-content: center;
+    /* Fix search textarea alignment issue with UL elements */
+    margin-top: 0px;
+    height: unset;
+    /* Prevent height from jumping around when input is focused */
+    line-height: 1;
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-selection__rendered {
+    /* Min height to reserve spacing */
+    min-height: calc(var(--mainFontSize) + 13px);
+}
+
+/* Make search bar invisible unless the select2 is active, to save space */
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
+    height: 1px;
+}
+
+.select2_multi_sameline+span.select2-container.select2-container--focus .select2-selection--multiple .select2-search--inline {
+    height: unset;
+}

public/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

public/css/st-tailwind.css

@@ -0,0 +1,613 @@
+.text_warning {
+    color: rgb(220 173 16);
+}
+
+.text_danger {
+    color: var(--fullred);
+}
+
+.highlighted {
+    color: black;
+    background-color: yellow;
+    text-shadow: none !important;
+}
+
+.m-t-0 {
+    margin-top: 0;
+}
+
+.m-t-1 {
+    margin-top: 1em;
+}
+
+.m-t-2 {
+    margin-top: 2em;
+}
+
+.m-t-3 {
+    margin-top: 3em;
+}
+
+.m-t-4 {
+    margin-top: 4em;
+}
+
+.m-t-5 {
+    margin-top: 5em;
+}
+
+.m-b-1 {
+    margin-bottom: 1em;
+}
+
+.m-b-2 {
+    margin-bottom: 2em;
+}
+
+.m-b-3 {
+    margin-bottom: 3em;
+}
+
+.m-b-4 {
+    margin-bottom: 4em;
+}
+
+.m-b-5 {
+    margin-bottom: 5em;
+}
+
+.tooltip {
+    cursor: help;
+}
+
+.margin-bot-10px,
+.marginBot10 {
+    margin-bottom: 10px !important;
+}
+
+.marginTop10 {
+    margin-top: 10px !important;
+}
+
+.marginBot5 {
+    margin-bottom: 5px !important;
+}
+
+.marginTop5 {
+    margin-top: 5px !important;
+}
+
+.marginTopBot5 {
+    margin-top: 5px !important;
+    margin-bottom: 5px !important;
+}
+
+.margin5 {
+    margin: 5px;
+}
+
+.marginLeft5 {
+    margin-left: 5px;
+}
+
+.overflowYAuto {
+    overflow-y: auto;
+}
+
+.heightMinContent {
+    height: min-content;
+}
+
+.justifySpaceBetween {
+    justify-content: space-between;
+}
+
+.justifySpaceEvenly {
+    justify-content: space-evenly;
+}
+
+.justifySpaceAround {
+    justify-content: space-around;
+}
+
+.alignitemsflexstart {
+    align-items: flex-start !important;
+}
+
+.alignItemsFlexEnd {
+    align-items: flex-end !important;
+}
+
+.alignItemsBaseline {
+    align-items: baseline !important;
+}
+
+.alignSelfStart {
+    align-self: start;
+}
+
+.gap0 {
+    gap: 0 !important;
+}
+
+.gap3px {
+    gap: 3px !important;
+}
+
+.gap5px {
+    gap: 5px !important;
+}
+
+.gap10px {
+    gap: 10px !important;
+}
+
+.gap10h20v {
+    gap: 10px 20px !important;
+}
+
+.gap10h5v {
+    gap: 5px 10px !important;
+}
+
+.wide10pMinFit {
+    width: 10%;
+    min-width: fit-content;
+}
+
+.wide100pLess70px {
+    width: calc(100% - 70px);
+}
+
+.wideMax100px {
+    max-width: 100px;
+}
+
+.width100px {
+    width: 100px;
+}
+
+.widthUnset {
+    width: unset;
+}
+
+.no-border {
+    border: none !important;
+}
+
+.no-shadow {
+    box-shadow: none !important;
+}
+
+.height100p {
+    height: 100%;
+}
+
+.height100pSpaceEvenly {
+    align-content: space-evenly;
+    height: 100%;
+}
+
+.height32px {
+    height: 32px;
+}
+
+.TxtLrgBoldCenter {
+    text-align: center;
+    font-size: large;
+    font-weight: 600;
+}
+
+.textAlignCenter {
+    text-align: center;
+}
+
+.margin-right-10px {
+    margin-right: 10px;
+}
+
+
+.success {
+    color: green;
+}
+
+.failure {
+    color: red;
+}
+
+.optional {
+    color: lightgray;
+}
+
+.monospace {
+    font-family: var(--monoFontFamily);
+}
+
+.expander {
+    flex-grow: 1;
+}
+
+.redOverlayGlow {
+    color: #800;
+    opacity: 0.8 !important;
+    text-shadow: none !important;
+}
+
+.width100p {
+    width: 100%;
+}
+
+.flex {
+    display: flex;
+}
+
+.flexBasis100p {
+    flex-basis: 100%;
+}
+
+.flexBasis50p {
+    flex-basis: 50%
+}
+
+.flexBasis25p {
+    flex-basis: 25%
+}
+
+.flexBasis200px {
+    flex-basis: 200px
+}
+
+.flexBasis48p {
+    flex-basis: 48%
+}
+
+.flexBasis30p {
+    flex-basis: 30%;
+}
+
+.flex-container {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+}
+
+.flexNoGap {
+    gap: unset !important;
+}
+
+.flexGrow {
+    flex-grow: 1;
+}
+
+.flexShrink {
+    flex-shrink: 1
+}
+
+.flexWrap {
+    flex-wrap: wrap;
+}
+
+.flexnowrap,
+.flexNoWrap {
+    flex-wrap: nowrap;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.alignitemscenter,
+.alignItemsCenter {
+    align-items: center;
+}
+
+.alignitemsstart,
+.alignItemsStart {
+    align-items: start;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.maxWidth200px {
+    max-width: 200px;
+}
+
+.alignContentFlexStart {
+    align-content: flex-start;
+}
+
+.alignContentCenter {
+    align-content: center;
+}
+
+.overflowHidden {
+    overflow: hidden;
+}
+
+.padding0 {
+    padding: 0;
+}
+
+.padding5 {
+    padding: 5px;
+}
+
+.padding10 {
+    padding: 10px;
+}
+
+.margin0 {
+    margin: 0;
+}
+
+.margin0auto {
+    margin: 0 auto;
+}
+
+.margin-r5 {
+    margin-right: 5px;
+}
+
+.margin-r2 {
+    margin-right: 2px;
+}
+
+.flexAuto {
+    flex: auto;
+}
+
+.flex0 {
+    flex: 0;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.flex2 {
+    flex: 2 !important;
+}
+
+.flex3 {
+    flex: 3;
+}
+
+.flex4 {
+    flex: 4;
+}
+
+.flexFlowColumn {
+    flex-flow: column;
+}
+
+.flexFlowRow {
+    flex-flow: row;
+}
+
+.wideMinContent {
+    width: min-content;
+}
+
+.flexWide50p {
+    flex: 50%;
+}
+
+.wide25p {
+    width: 25%;
+}
+
+.wide30p {
+    width: 30% !important;
+}
+
+.justifyLeft {
+    text-align: start;
+    justify-content: left;
+    margin-left: unset;
+}
+
+.justifyCenter {
+    justify-content: center;
+    margin: 0 auto;
+}
+
+.justifyContentSpaceAround {
+    justify-content: space-around;
+}
+
+.justifyContentFlexStart {
+    justify-content: flex-start;
+}
+
+.justifyContentFlexEnd {
+    justify-content: flex-end;
+}
+
+.spaceEvenly {
+    justify-content: space-evenly;
+}
+
+.spaceBetween {
+    justify-content: space-between;
+}
+
+.widthNatural {
+    width: unset !important;
+    min-width: unset !important;
+    max-width: unset !important;
+}
+
+.widthFreeExpand {
+    width: -webkit-fill-available;
+    width: -moz-available;
+}
+
+.wide100p {
+    width: 100%;
+}
+
+.wide50p {
+    width: 50%;
+}
+
+.wide50px {
+    width: 50px;
+}
+
+.indent20p {
+    margin-left: 20px;
+}
+
+/*used to fix smallness of certain FontAwesome glyph which break button squareness*/
+/*currently used on: CharList Import*/
+
+.faSmallFontSquareFix {
+    font-size: calc(var(--mainFontSize) *1.25);
+    width: calc(var(--mainFontSize) *1.95);
+}
+
+.textarea_compact {
+    font-size: calc(var(--mainFontSize) * 0.95);
+    line-height: 1.2;
+}
+
+.hoverglow {
+    transition: opacity 200ms;
+}
+
+.hoverglow:hover {
+    opacity: 1 !important;
+    cursor: pointer;
+}
+
+input:disabled,
+textarea:disabled {
+    cursor: not-allowed;
+    filter: brightness(0.5);
+}
+
+#AdvancedFormatting .disabled {
+    filter: brightness(0.5);
+}
+
+.debug-red {
+    border: 1px solid red !important;
+}
+
+.debug-yellow {
+    border: 1px solid yellow !important;
+}
+
+.debug-green {
+    border: 1px solid green !important;
+}
+
+.debug-blue {
+    border: 1px solid blue !important;
+}
+
+.debug-purple {
+    border: 1px solid purple !important;
+}
+
+.fontsize120p {
+    font-size: calc(var(--mainFontSize) * 1.2) !important;
+}
+
+.fontsize90p {
+    font-size: calc(var(--mainFontSize) * 0.9) !important;
+}
+
+.fontsize80p {
+    font-size: calc(var(--mainFontSize) * 0.8) !important;
+}
+
+.fontsize60p {
+    font-size: calc(var(--mainFontSize) * 0.6) !important;
+}
+
+.paddingBottom5px {
+    padding: unset;
+    padding-bottom: 5px;
+}
+
+.paddingTopBot5 {
+    padding: 5px 0;
+}
+
+.paddingLeftRight5 {
+    padding: 0 5px;
+}
+
+.heightFitContent {
+    height: fit-content;
+}
+
+.widthFitContent {
+    width: fit-content;
+    min-width: fit-content;
+}
+
+.flexGap5 {
+    gap: 5px;
+}
+
+.flexGap10 {
+    gap: 10px;
+}
+
+.opacity50p {
+    opacity: 0.5
+}
+
+.grayscale {
+    filter: grayscale(100%);
+}
+
+.opacity1 {
+    opacity: 1 !important;
+}
+
+.circleborder30px {
+    right: 30px;
+    top: 10px;
+    position: absolute;
+    border: 1px solid var(--SmartThemeBodyColor);
+    border-radius: 100%;
+    aspect-ratio: 1 / 1;
+    height: 30px;
+    text-align: center;
+    padding: 5px;
+}
+
+ul.li-padding-b-1 li {
+    padding-bottom: 1em;
+}
+
+ul.li-padding-b-2 li {
+    padding-bottom: 2em;
+}
+
+ul.li-padding-b-5 li {
+    padding-bottom: 5em;
+}
+
+ul.li-padding-bot5 li {
+    padding-bottom: 5px;
+}
+
+ul.li-padding-bot10 li {
+    padding-bottom: 10px;
+}
+
+.wordBreakAll {
+    word-break: break-all;
+}

public/css/tags.css

@@ -0,0 +1,286 @@
+#bulk_tags_div,
+#tags_div {
+    min-width: 0;
+}
+
+.tag_controls {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+}
+
+.tag_view_item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 5px;
+}
+
+.tag_view_name {
+    text-align: left;
+}
+
+.tag_view_counter {
+    text-align: right;
+    flex: 1;
+}
+
+.tag_view_color_picker {
+    position: relative;
+}
+
+.tag_view_color_picker .link_icon {
+    position: absolute;
+    top: 50%;
+    right: 0px;
+    opacity: 0.5;
+}
+
+.tag_delete {
+    padding: 2px 4px;
+    color: var(--SmartThemeBodyColor) !important;
+}
+
+.tag {
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black30a);
+    border-color: var(--white50a);
+    padding: 0.1rem 0.2rem;
+    font-size: calc(var(--mainFontSize) - 5%);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    gap: 10px;
+    width: fit-content;
+    min-width: 0;
+    text-shadow: none !important;
+}
+
+.rm_tag_filter .tag:not(.actionable) {
+    display: none;
+}
+
+.tag.actionable {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    min-height: calc(var(--mainFontSize) * 2);
+    min-width: calc(var(--mainFontSize) * 2);
+    font-size: calc(var(--mainFontSize) * 1);
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.tag.actionable.clearAllFilters {
+    border: 0;
+    background: none;
+}
+
+.tag.placeholder-expander {
+    cursor: alias;
+    border: 0;
+}
+
+.tagListHint {
+    align-self: center;
+    display: flex;
+    margin-right: 10px;
+}
+
+.tag_remove {
+    cursor: pointer;
+}
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 0.2rem;
+    align-items: flex-end;
+}
+
+#bulkTagsList,
+#tagList.tags {
+    margin: 5px 0;
+}
+
+#bulkTagsList,
+#tagList .tag,
+#groupTagList .tag {
+    opacity: 0.6;
+}
+
+#tagList .tag:has(.tag_remove:hover) {
+    opacity: 1;
+}
+
+#tagList .tag:has(.tag_remove:hover) .tag_name {
+    opacity: 0.6;
+}
+
+.tags.tags_inline {
+    opacity: 0.6;
+    column-gap: 0.2rem;
+    row-gap: 0.2rem;
+    justify-content: flex-start;
+    max-height: 66%;
+    overflow: hidden;
+    flex-basis: 100%;
+}
+
+.tag_name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+    text-shadow: none !important;
+}
+
+.tags_inline .tag {
+    font-size: calc(var(--mainFontSize) - 15%);
+    padding: 0 0.15rem;
+}
+
+.rm_tag_controls {
+    display: flex;
+    column-gap: 10px;
+    row-gap: 5px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    margin: 5px;
+}
+
+.rm_tag_filter .tag {
+    cursor: pointer;
+    opacity: 0.6;
+    filter: brightness(0.8);
+}
+
+.rm_tag_filter .tag.actionable {
+    transition: opacity 200ms;
+}
+
+.rm_tag_filter .tag:hover {
+    opacity: 1;
+    filter: brightness(1);
+}
+
+.tags_view {
+    margin: 0;
+    aspect-ratio: 1 / 1;
+}
+
+.tag.selected {
+    opacity: 1 !important;
+    filter: none !important;
+}
+
+.tag.excluded {
+    opacity: 1 !important;
+    filter: saturate(0.4) !important;
+    border: 1px solid red;
+}
+
+.tag.excluded::after {
+    position: absolute;
+    height: calc(var(--mainFontSize)*1.5);
+    left: 0;
+    right: 0;
+    content: "\d7";
+    pointer-events: none;
+    font-size: calc(var(--mainFontSize) *3);
+    color: red;
+    line-height: calc(var(--mainFontSize)*1.3);
+    text-align: center;
+    text-shadow: 1px 1px 0px black,
+        -1px -1px 0px black,
+        -1px 1px 0px black,
+        1px -1px 0px black;
+    opacity: 1;
+}
+
+.tag_as_folder.right_menu_button {
+    filter: brightness(75%) saturate(0.6);
+}
+
+.tag_as_folder.right_menu_button:hover,
+.tag_as_folder.right_menu_button.flash {
+    filter: brightness(150%) saturate(0.6);
+}
+
+.tag_as_folder.right_menu_button.no_folder {
+    filter: brightness(25%) saturate(0.25);
+}
+
+.tag_as_folder.right_menu_button .tag_folder_indicator {
+    position: absolute;
+    top: calc(var(--mainFontSize) * -0.5);
+    right: calc(var(--mainFontSize) * -0.5);
+    font-size: calc(var(--mainFontSize) * 1);
+    line-height: calc(var(--mainFontSize) * 1.3);
+    text-align: center;
+    text-shadow: 1px 1px 0px black,
+        -1px -1px 0px black,
+        -1px 1px 0px black,
+        1px -1px 0px black;
+    opacity: 1;
+}
+
+.tag.indicator::after {
+    position: absolute;
+    top: calc(var(--mainFontSize) * -0.5);
+    right: -2px;
+    content: "\25CF";
+    font-size: calc(var(--mainFontSize) * 1);
+    color: var(--SmartThemeBodyColor);
+    line-height: calc(var(--mainFontSize) * 1.3);
+    text-align: center;
+    text-shadow: 1px 1px 0px black,
+        -1px -1px 0px black,
+        -1px 1px 0px black,
+        1px -1px 0px black;
+    opacity: 1;
+}
+
+.rm_tag_bogus_drilldown {
+    height: calc(var(--mainFontSize)* 2 - 2);
+}
+
+.rm_tag_bogus_drilldown .tag:not(:first-child) {
+    position: relative;
+    margin-left: 1em;
+}
+
+.rm_tag_bogus_drilldown .tag:not(:first-child)::before {
+    font-family: 'Font Awesome 6 Free';
+    content: "\f054";
+    position: absolute;
+    left: -1em;
+    top: auto;
+    color: var(--SmartThemeBodyColor);
+    text-shadow: 1px 1px 0px black,
+        -1px -1px 0px black,
+        -1px 1px 0px black,
+        1px -1px 0px black;
+    opacity: 1;
+}
+
+.bogus_folder_select_back .avatar {
+    display: none !important;
+}
+
+.bogus_folder_select_back .bogus_folder_back_placeholder {
+    min-height: calc(var(--mainFontSize)*2);
+    width: var(--avatar-base-width);
+    justify-content: center;
+}

public/css/toggle-dependent.css

@@ -0,0 +1,500 @@
+:root {
+    --big-avatar-height-factor: 1.8;
+    --big-avatar-width-factor: 1.2;
+    --big-avatar-border-factor: 5;
+}
+
+body.tts .mes[is_system="true"] .mes_narrate {
+    display: none;
+}
+
+body.sd .sd_message_gen,
+body.translate .mes_translate,
+body.tts .mes_narrate {
+    display: inline-block;
+}
+
+body:not(.tts) #ttsExtensionNarrateAll {
+    display: none;
+}
+
+body.no-hotswap .hotswap,
+body.no-timer .mes_timer,
+body.no-timestamps .timestamp,
+body.no-tokenCount .tokenCounterDisplay,
+body.no-mesIDDisplay .mesIDDisplay,
+body.no-modelIcons .icon-svg,
+body.hideChatAvatars .mesAvatarWrapper .avatar {
+    display: none !important;
+}
+
+body.hideChatAvatars .last_mes:not(.smallSysMes) {
+    padding-bottom: 20px !important;
+}
+
+body.hideChatAvatars.no-timer.no-tokenCount.no-mesIDDisplay .swipe_left {
+    left: 0px;
+}
+
+body.hideChatAvatars .swipe_left {
+    left: 7px;
+}
+
+body.square-avatars .avatar,
+body.square-avatars .avatar img {
+    border-radius: var(--avatar-base-border-radius) !important;
+}
+
+/*char list grid mode*/
+
+body.charListGrid #rm_print_characters_block {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+    align-content: flex-start;
+}
+
+body.charListGrid #rm_print_characters_block .bogus_folder_select,
+body.charListGrid #rm_print_characters_block .character_select,
+body.charListGrid #rm_print_characters_block .group_select,
+#user_avatar_block.gridView .avatar-container {
+    width: 30%;
+    align-items: flex-start;
+    height: min-content;
+    flex-direction: column;
+    overflow: hidden;
+    max-width: 100px;
+}
+
+/* Save a bit of space here */
+body.charListGrid #rm_print_characters_block .character_name_block {
+    gap: 0;
+    margin-bottom: 0;
+}
+
+body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,
+body.charListGrid #rm_print_characters_block .bogus_folder_select .bogus_folder_counter,
+body.charListGrid #rm_print_characters_block .character_select .ch_name,
+body.charListGrid #rm_print_characters_block .group_select .ch_name,
+body.charListGrid #rm_print_characters_block .group_select .group_select_counter,
+#user_avatar_block.gridView .avatar-container .ch_name,
+#user_avatar_block.gridView .avatar-container .bogus_folder_counter,
+#user_avatar_block.gridView .avatar-container .group_select_counter {
+    width: 100%;
+    max-width: 100px;
+    text-align: center;
+    font-size: calc(var(--mainFontSize) * .8);
+}
+
+body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,
+body.charListGrid #rm_print_characters_block .character_select .character_name_block,
+body.charListGrid #rm_print_characters_block .group_select .group_name_block,
+#user_avatar_block.gridView .avatar-container .character_name_block {
+    width: 100%;
+    flex-direction: column;
+}
+
+body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,
+body.charListGrid #rm_print_characters_block .character_select .character_select_container,
+body.charListGrid #rm_print_characters_block .group_select .group_select_container,
+#user_avatar_block.gridView .avatar-container .character_select_container,
+#user_avatar_block.gridView .avatar-container .group_select_container {
+    width: 100%;
+    justify-content: center;
+    max-width: 100px;
+}
+
+body.charListGrid #rm_print_characters_block .group_select {
+    width: 30%;
+    height: min-content;
+    align-items: center !important;
+    flex-direction: column;
+    overflow: hidden;
+    max-width: 100px;
+}
+
+body.charListGrid #rm_print_characters_block .group_select .group_name_block {
+    width: 100%;
+}
+
+body.charListGrid #rm_print_characters_block .ch_description,
+body.charListGrid #rm_print_characters_block .tags_inline,
+body.charListGrid #rm_print_characters_block .group_select_block_list,
+body.charListGrid #rm_print_characters_block .ch_avatar_url,
+body.charListGrid #rm_print_characters_block .character_version,
+body.charListGrid #rm_print_characters_block .character_name_block_sub_line,
+#user_avatar_block.gridView .avatar-container .ch_description,
+body.charListGrid #rm_print_characters_block .bogus_folder_select_back .bogus_folder_back_placeholder {
+    display: none;
+}
+
+body.charListGrid #rm_print_characters_block .bogus_folder_select_back .avatar {
+    display: flex !important;
+}
+
+/* Hack for keeping the spacing */
+/*
+body.charListGrid #rm_print_characters_block .ch_add_placeholder {
+    display: flex !important;
+    opacity: 0;
+}
+*/
+
+body.charListGrid #rm_print_characters_block .ch_additional_info {
+    display: none;
+}
+
+/*big avatars mode page-wide changes*/
+
+body.big-avatars .character_select .avatar,
+body.big-avatars .group_select .avatar,
+body.big-avatars .bogus_folder_select .avatar {
+    flex: unset;
+}
+
+body.big-avatars .avatar {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));
+    /* width: unset; */
+    border-style: none;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* align-self: unset; */
+    overflow: visible;
+    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));
+}
+
+body.big-avatars #user_avatar_block .avatar,
+body.big-avatars #user_avatar_block .avatar_upload {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));
+    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));
+}
+
+body.big-avatars #user_avatar_block .avatar img {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));
+}
+
+body.big-avatars .avatar img {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));
+    object-fit: cover;
+    object-position: center;
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor));
+}
+
+body.big-avatars .bogus_folder_select_back .bogus_folder_back_placeholder {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+}
+
+body:not(.big-avatars) .avatar_collage {
+    min-width: var(--avatar-base-width);
+    aspect-ratio: 1 / 1;
+}
+
+body:not(.big-avatars) .avatar_collage img {
+    border-radius: 0% !important;
+}
+
+body.big-avatars .avatar_collage {
+    min-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    max-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
+    aspect-ratio: 2 / 3;
+}
+
+body.big-avatars .ch_description,
+body.big-avatars .avatar-container .ch_description {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    white-space: pre-line;
+    text-overflow: unset;
+}
+
+body.big-avatars .avatars_inline_small .avatar,
+body.big-avatars .avatars_inline_small .avatar img {
+    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor));
+}
+
+body.big-avatars .avatars_inline {
+    max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));
+}
+body.big-avatars .avatars_inline.avatars_multiline {
+    max-height: fit-content;
+}
+
+body.big-avatars .avatars_inline.avatars_inline_small {
+    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
+}
+body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {
+    height: inherit;
+}
+
+body:not(.big-avatars) .avatars_inline_small .avatar_collage {
+    min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));
+}
+
+body.big-avatars .avatars_inline_small .avatar_collage {
+    min-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));
+    max-width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) * var(--inline-avatar-small-factor));
+}
+
+/* border radius for big avatars collages */
+
+body.big-avatars .collage_2 .img_1 {
+    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;
+}
+
+body.big-avatars .collage_2 .img_2 {
+    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;
+}
+
+body.big-avatars .collage_3 .img_1 {
+    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 0 !important;
+}
+
+body.big-avatars .collage_3 .img_2 {
+    border-radius: 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 !important;
+}
+
+body.big-avatars .collage_3 .img_3 {
+    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;
+}
+
+body.big-avatars .collage_4 .img_1 {
+    border-radius: calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 0 !important;
+}
+
+body.big-avatars .collage_4 .img_2 {
+    border-radius: 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 0 !important;
+}
+
+body.big-avatars .collage_4 .img_3 {
+    border-radius: 0 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) !important;
+}
+
+body.big-avatars .collage_4 .img_4 {
+    border-radius: 0 0 calc(var(--avatar-base-border-radius) * var(--big-avatar-border-factor)) 0 !important;
+}
+
+
+
+/*bubble chat style*/
+
+body.bubblechat .mes {
+    padding: 10px;
+    border-radius: 10px;
+    background-color: var(--SmartThemeBotMesBlurTintColor);
+    margin-bottom: 5px;
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+
+body.bubblechat .mes[is_user="true"] {
+    background-color: var(--SmartThemeUserMesBlurTintColor);
+}
+
+
+/* Document Style */
+
+body.documentstyle #chat .mes:not(.last_mes) {
+    padding: 5px 10px 0px 10px;
+}
+
+body.documentstyle .last_mes {
+    padding-top: 0;
+}
+
+body.documentstyle #chat .mes .mes_text {
+    padding: 0;
+}
+
+body.documentstyle #chat .mes .mes_block {
+    margin-right: 30px;
+}
+
+body.documentstyle #chat .mes .mes_text {
+    margin-left: 20px;
+}
+
+body.documentstyle #chat .last_mes .mes_text {
+    margin-left: 20px;
+    min-height: 70px;
+}
+
+body.documentstyle #chat .last_mes:has(> .del_checkbox[style*="display: block"]) .mes_text {
+    margin-left: 0px;
+}
+
+body.documentstyle #chat .last_mes .swipe_left {
+    left: 5px;
+}
+
+body.documentstyle #chat .mes .mesAvatarWrapper,
+body.documentstyle #chat .mes .mes_block .ch_name .name_text,
+body.documentstyle #chat .mes .mes_block .ch_name .timestamp,
+body.documentstyle .mes:not(.last_mes) .ch_name .mes_buttons {
+    display: none !important;
+}
+
+/*FastUI blur removal*/
+
+body.no-blur * {
+    backdrop-filter: unset !important;
+}
+
+/* body.no-blur #send_form.no-connection {
+    background-color: rgba(100, 0, 0, 0.9) !important;
+} */
+
+body.no-blur #bg1,
+body.no-blur #bg_custom {
+    filter: unset;
+
+}
+
+body.no-blur #top-bar,
+body.no-blur #send_form {
+    background-color: var(--SmartThemeBlurTintColor) !important;
+}
+
+/* wAIfu mode*/
+
+body.waifuMode #top-bar {
+    border-radius: 0 0 20px 20px;
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+
+body.waifuMode #sheld {
+    height: 40vh;
+    height: 40dvh;
+    top: calc(100% - 40vh);
+    bottom: 0;
+}
+
+body.waifuMode #chat {
+    border-top: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 20px 20px 0 0;
+}
+
+body.waifuMode #expression-wrapper {
+    justify-content: center;
+}
+
+body.waifuMode .expression-holder {
+    max-height: 90vh;
+    max-width: 90vw;
+    height: 90vh;
+    width: fit-content;
+    bottom: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    z-index: 2;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+}
+
+body.waifuMode .zoomed_avatar {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
+    width: calc((100vw - var(--sheldWidth)) /2);
+    position: absolute;
+    padding: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    z-index: 29;
+    overflow: hidden;
+    display: none;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: 50px;
+    aspect-ratio: 2 / 3;
+    height: auto;
+}
+
+/* movingUI*/
+
+body.movingUI .drag-grabber {
+    display: inline;
+}
+
+body.movingUI #sheld,
+body.movingUI .drawer-content,
+body.movingUI #expression-holder,
+body.movingUI .zoomed_avatar,
+body.movingUI .draggable,
+body.movingUI #floatingPrompt {
+    resize: both;
+}
+
+#expression-image.default,
+#expression-holder:has(.default) {
+    height: 120px;
+    margin-top: 0;
+    top: 50px;
+    justify-content: center;
+}
+
+/*No Text Shadows Mode*/
+
+body.noShadows * {
+    text-shadow: none !important;
+}
+
+body.expandMessageActions .mes .mes_buttons .extraMesButtons {
+    display: inherit !important;
+}
+
+body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
+    display: none !important;
+}
+
+#smooth_streaming:not(:checked)~#smooth_streaming_speed_control {
+    display: none;
+}
+
+#smooth_streaming:checked~#smooth_streaming_speed_control {
+    display: block;
+}
+
+.mdhotkey_icon {
+    opacity: 0.6;
+}
+
+label[for="trim_spaces"]:has(input:checked) i.warning {
+    display: none;
+}
+
+label[for="trim_spaces"]:not(:has(input:checked)) small {
+    color: var(--warning);
+    opacity: 1;
+}
+
+#claude_function_prefill_warning {
+    display: none;
+    color: red;
+    font-weight: bold;
+}
+
+#openai_settings:has(#openai_function_calling:checked):has(#claude_assistant_prefill:not(:placeholder-shown), #claude_assistant_impersonation:not(:placeholder-shown)) #claude_function_prefill_warning {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin: 10px 0;
+}
+
+#mistralai_other_models:empty {
+    display: none;
+}
+
+#banned_tokens_block_ooba:not(:has(#send_banned_tokens_textgenerationwebui:checked)) #banned_tokens_controls_ooba {
+    filter: brightness(0.5);
+}

public/css/user.css

@@ -0,0 +1 @@
+/* Put custom styles here. */

public/css/world-info.css

@@ -0,0 +1,280 @@
+.world_info_select_block {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 5px;
+}
+
+.budget_cap_note {
+    flex-basis: 100%;
+    line-height: 0.1;
+}
+
+#world_popup {
+    min-height: 100px;
+    min-width: 100px;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    z-index: 3010;
+    overflow-y: hidden;
+}
+
+.WIEntryContentAndMemo {
+    width: 100% !important;
+    flex-wrap: nowrap !important;
+}
+
+.WIEntryContentAndMemo .world_entry_thin_controls {
+    flex: 1;
+}
+
+#world_popup_bottom_holder {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#world_popup_bottom_holder div {
+    width: fit-content;
+    user-select: none;
+}
+
+#form_rename_world {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.world_popup_expander {
+    flex-grow: 1;
+}
+
+#world_popup_entries_list {
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+#world_popup_entries_list:empty {
+    width: 100%;
+    height: 100%;
+}
+
+#world_popup_entries_list:empty::before {
+    content: 'No entries found.';
+    font-size: calc(var(--mainFontSize) + .1rem);
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+.world_entry_form_control {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.world_entry_form_control .keyprimarytextpole,
+.world_entry_form_control .keysecondarytextpole {
+    padding-right: 25px;
+}
+
+.world_entry_thin_controls {
+    display: flex;
+    flex-direction: row;
+}
+
+/* .world_entry_thin_controls>div {
+    flex: 1;
+} */
+
+.world_entry_form_control label h4 {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.world_entry_form_control label h5 {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+.world_entry_form_control textarea {
+    height: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    min-height: calc(var(--mainFontSize) + 14px);
+}
+
+.delete_entry_button {
+    height: min-content;
+}
+
+.world_entry_form_control.world_entry_form_horizontal {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.world_entry .inline-drawer-header {
+    cursor: initial;
+}
+
+.world_entry .killSwitch {
+    cursor: pointer;
+}
+
+.world_entry_form_control input[type=button] {
+    cursor: pointer;
+}
+
+.world_entry_form_horizontal h5 {
+    margin: 0 1rem;
+}
+
+.world_entry_form_control .checkbox {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    column-gap: 10px;
+}
+
+.world_entry_form_control .checkbox h4 {
+    margin: 0;
+    display: inline-block;
+}
+
+.world_entry_form_radios label {
+    margin-left: 0;
+}
+
+.world_entry_form_radios h4 {
+    display: inline;
+}
+
+#world_popup h5 {
+    color: var(--grey70);
+}
+
+/* possible place for WI Entry header styling */
+/* .world_entry_form .inline-drawer-header {
+    background-color: var(--SmartThemeShadowColor);
+} */
+
+#world_editor_select {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 10em;
+}
+
+#world_info_search {
+    width: 10em;
+    min-width: 10em;
+    flex-grow: 1;
+}
+
+#world_info_sort_order {
+    width: 7em;
+}
+
+.world_entry .killSwitch.fa-toggle-on {
+    color: var(--SmartThemeQuoteColor);
+}
+
+.wi-card-entry {
+    border: 1px solid;
+    border-color: var(--SmartThemeBorderColor);
+    border-radius: 10px;
+    padding: 0 5px;
+    margin-bottom: 1px;
+}
+
+.world_entry {
+    transition: opacity 500ms;
+}
+
+.disabledWIEntry {
+    opacity: 0.4;
+    filter: grayscale(1);
+}
+
+.disabledWIEntry:not(input):hover {
+    opacity: 1;
+    filter: grayscale(0.5);
+}
+
+.height32px {
+    height: 32px;
+}
+
+.WIEntryHeaderTitleMobile {
+    display: none;
+}
+
+span.select2-container .select2-selection__choice__display:has(> .regex_item),
+span.select2-container .select2-results__option:has(> .result_block .regex_item) {
+    background-color: #D27D2D30;
+}
+
+.regex_item .regex_icon {
+    background-color: var(--black30a);
+    color: var(--SmartThemeBodyColor);
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 7px;
+    font-weight: bold;
+    font-size: calc(var(--mainFontSize) * 0.75);
+    padding: 0px 3px;
+    position: relative;
+    top: -1px;
+    margin-right: 3px;
+}
+
+.select2-results__option .regex_item .regex_icon {
+    margin-right: 6px;
+}
+
+.select2-results__option .item_count {
+    margin-left: 10px;
+    float: right;
+}
+
+select.keyselect+span.select2-container .select2-selection--multiple {
+    padding-right: 30px;
+}
+
+.switch_input_type_icon {
+    cursor: pointer;
+    font-weight: bold;
+    height: 20px;
+    width: fit-content;
+    margin-right: 5px;
+    margin-top: calc(5px + var(--mainFontSize));
+    position: absolute;
+    right: 0;
+    padding: 1px;
+
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+
+    opacity: 0.5;
+    color: var(--SmartThemeBodyColor);
+    transition: opacity 0.3s;
+}
+
+.switch_input_type_icon:hover {
+    opacity: 1;
+}
+
+#wiCheckboxes {
+    align-self: center;
+    width: 100%;
+}
+
+.world_entry:has(input[name="delay_until_recursion"]:not(:checked)) .world_entry_form_control:has(input[name="delayUntilRecursionLevel"]) {
+    display: none;
+}