sillytavern-character-memory/style.css
bal-spec 39d1b43b48 feat: replace textarea editor with card-based editor in consolidation dialog
Each consolidated memory is now an editable card with text inputs instead
of raw text with <memory> tags. Supports add/delete bullets and blocks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 22:47:53 -08:00

468 lines
8.5 KiB
CSS

.charMemory_settings .inline-drawer-content {
padding: 5px 0;
}
.charMemory_statusRow {
margin: 4px 0;
}
.charMemory_buttonRow {
display: flex;
gap: 8px;
margin: 8px 0;
}
.charMemory_sliderRow {
margin: 8px 0;
}
.charMemory_sliderRow input[type="range"] {
width: 100%;
}
.charMemory_promptSection {
margin: 8px 0;
}
.charMemory_promptSection textarea {
width: 100%;
resize: vertical;
min-height: 100px;
}
/* Stats bar */
.charMemory_statsBar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 8px;
}
.charMemory_statItem {
display: flex;
align-items: center;
gap: 5px;
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 4px;
padding: 4px 8px;
font-size: 0.85em;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.charMemory_statItem i {
opacity: 0.6;
flex-shrink: 0;
}
.charMemory_statItem span {
overflow: hidden;
text-overflow: ellipsis;
}
/* Tabs */
.charMemory_tabs {
display: flex;
gap: 0;
margin-bottom: 6px;
border-bottom: 1px solid var(--SmartThemeBorderColor, rgba(128, 128, 128, 0.2));
}
.charMemory_tab {
padding: 6px 14px;
font-size: 0.85em;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
opacity: 0.6;
color: var(--SmartThemeBodyColor, #ccc);
transition: opacity 0.15s, border-color 0.15s;
}
.charMemory_tab:hover {
opacity: 0.85;
}
.charMemory_tab.active {
opacity: 1;
border-bottom-color: var(--SmartThemeQuoteColor, #888);
}
/* Helper text */
.charMemory_helperText {
display: block;
font-size: 0.8em;
opacity: 0.5;
margin-top: 2px;
line-height: 1.3;
}
/* Separator */
.charMemory_separator {
border: none;
border-top: 1px solid var(--SmartThemeBorderColor, rgba(128, 128, 128, 0.2));
margin: 10px 0;
}
/* Danger button */
.charMemory_dangerBtn {
color: var(--SmartThemeQuoteColor, #c44);
}
/* Diagnostics */
.charMemory_diagnosticsContent {
max-height: 400px;
overflow-y: auto;
}
.charMemory_diagTimestamp {
font-size: 0.85em;
opacity: 0.7;
margin-bottom: 6px;
}
.charMemory_diagSection {
margin: 8px 0;
}
.charMemory_diagCard {
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 4px;
padding: 6px 8px;
margin: 4px 0;
font-size: 0.9em;
}
.charMemory_diagCardTitle {
font-weight: bold;
margin-bottom: 2px;
}
.charMemory_diagCardKeys {
font-size: 0.85em;
opacity: 0.8;
}
.charMemory_diagCardContent {
font-size: 0.85em;
opacity: 0.7;
white-space: pre-wrap;
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.charMemory_diagEmpty {
font-size: 0.85em;
opacity: 0.5;
font-style: italic;
margin: 4px 0;
}
/* Activity Log */
.charMemory_logEntry {
padding: 2px 4px;
border-bottom: 1px solid var(--SmartThemeBorderColor, rgba(128, 128, 128, 0.1));
line-height: 1.4;
}
.charMemory_logTime {
opacity: 0.5;
margin-right: 6px;
}
.charMemory_log_success {
color: var(--SmartThemeQuoteColor, #4a4);
}
.charMemory_log_warning {
color: orange;
}
.charMemory_log_error {
color: var(--SmartThemeQuoteColor, #c44);
}
.charMemory_logVerbose {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.8em;
opacity: 0.7;
margin: 4px 0;
max-height: 300px;
overflow-y: auto;
padding: 4px 6px;
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 4px;
}
/* Memory Manager Popup */
.charMemory_manager {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 60vh;
overflow-y: auto;
padding: 4px;
}
.charMemory_card {
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 6px;
padding: 10px 12px;
}
.charMemory_cardHeader {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.charMemory_cardTitle {
font-weight: bold;
font-size: 0.95em;
}
.charMemory_cardTimestamp {
font-size: 0.8em;
opacity: 0.6;
flex: 1;
}
.charMemory_cardActions {
display: flex;
gap: 4px;
}
.charMemory_cardBullets {
display: flex;
flex-direction: column;
gap: 4px;
}
.charMemory_bulletRow {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 3px 0;
border-top: 1px solid var(--SmartThemeBorderColor, rgba(128, 128, 128, 0.15));
}
.charMemory_bulletRow:first-child {
border-top: none;
}
.charMemory_bulletText {
flex: 1;
font-size: 0.9em;
line-height: 1.4;
min-width: 0;
word-break: break-word;
}
.charMemory_bulletActions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.charMemory_bulletActions .menu_button_icon {
padding: 2px 6px;
font-size: 0.85em;
min-width: unset;
}
/* Per-message buttons — inherit .mes_button base styling from ST */
.charMemory_extractHereBtn,
.charMemory_pinMemoryBtn {
cursor: pointer;
opacity: 0.7;
transition: opacity 0.15s;
}
.charMemory_extractHereBtn:hover,
.charMemory_pinMemoryBtn:hover {
opacity: 1;
}
/* Memory extracted indicator */
.charMemory_extractedIndicator {
display: inline-flex;
align-items: center;
margin-left: 4px;
opacity: 0.35;
color: var(--SmartThemeBodyColor, #ccc);
font-size: 0.75em;
vertical-align: middle;
cursor: default;
}
.charMemory_extractedIndicator:hover {
opacity: 0.7;
}
/* Batch Extract */
.charMemory_batchChatList {
max-height: 300px;
overflow-y: auto;
}
.charMemory_batchChatItem {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-bottom: 1px solid var(--SmartThemeBorderColor, rgba(128, 128, 128, 0.1));
font-size: 0.85em;
}
.charMemory_batchChatItem label {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
cursor: pointer;
}
.charMemory_batchChatName {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.charMemory_batchChatMeta {
font-size: 0.85em;
opacity: 0.5;
white-space: nowrap;
}
.charMemory_batchSelectRow {
margin: 4px 0;
}
.charMemory_batchProgress {
margin: 6px 0;
font-size: 0.85em;
}
.charMemory_batchProgressBar {
height: 4px;
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
}
.charMemory_batchProgressFill {
height: 100%;
background: var(--SmartThemeQuoteColor, #888);
border-radius: 2px;
width: 0%;
transition: width 0.3s;
}
/* Consolidation Dialog */
.charMemory_consolidationDialog {
display: flex;
flex-direction: column;
gap: 8px;
}
.charMemory_consolidationStats {
font-size: 0.9em;
padding: 6px 10px;
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.1));
border-radius: 6px;
}
.charMemory_consolidationPanes {
display: flex;
gap: 12px;
}
.charMemory_consolidationPane {
flex: 1;
min-width: 0;
}
.charMemory_consolidationPane h4 {
margin: 0 0 6px 0;
}
.charMemory_consolidationContent {
max-height: 50vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.charMemory_consolidationToolbar {
display: flex;
gap: 6px;
align-items: center;
padding-bottom: 6px;
border-bottom: 1px solid var(--SmartThemeBorderColor, rgba(255,255,255,0.1));
}
.charMemory_editorBulletRow {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
}
.charMemory_editorDash {
flex-shrink: 0;
font-size: 0.85em;
opacity: 0.5;
}
.charMemory_editorBulletInput {
flex: 1;
min-width: 0;
padding: 3px 6px;
font-size: 0.85em;
background: var(--SmartThemeBlurTintColor, rgba(0, 0, 0, 0.05));
color: var(--SmartThemeBodyColor);
border: 1px solid transparent;
border-radius: 4px;
transition: border-color 0.15s;
}
.charMemory_editorBulletInput:focus {
border-color: var(--SmartThemeBorderColor, rgba(255,255,255,0.2));
outline: none;
}
.charMemory_editorBullets {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 4px;
}
.charMemory_editorAddBullet,
.charMemory_editorAddBlock {
font-size: 0.8em;
opacity: 0.7;
padding: 2px 8px;
}
.charMemory_editorAddBullet:hover,
.charMemory_editorAddBlock:hover {
opacity: 1;
}
.charMemory_editorAddBlock {
margin-top: 8px;
}
.charMemory_editorCard {
position: relative;
}